| bitmasks | E | |||||||||||||||||||||||||||
| C | HD | Ez | Is | |||||||||||||||||||||||||
| color | feColorMatrix | UHD color* | matrix3d | matrix | viewBox++ | convert to degrees | U | Ez | . | Ez.Ez.rad | C.rr | |||||||||||||||||
| C.r | 1 | C.RR | 1 | HD.l | 1 | Ez.a1 | 1 | Ez.a | 1 | Ez.x | 1 | Ez.rad | 0.0174532925 | F | Ez | . | Ez.Ez.grad | C.gr | ||||||||||
| C.g | 2 | C.GR | 2 | HD.a | 2 | Ez.b1 | 2 | Ez.b | 2 | Ez.y | 2 | Ez.grad | 1.1111111111 | FN | Ez | . | Ez.Ez.turn | C.br | ||||||||||
| C.b | 4 | C.BR | 4 | HD.b | 4 | Ez.c1 | 4 | Ez.c | 4 | Ez.z | 4 | Ez.turn | 0.0027777778 | P | Ez | . | Ez. | C.ar | ||||||||||
| C.a | 8 | C.AR | 8 | HD.c | 2 | Ez.d1 | 8 | Ez.d | 8 | Ez.width | 4 | PR | Ez | . | Err:520 | C.cr | ||||||||||||
| C.h | 1 | C.CR | 16 | HD.h | 4 | Ez.a2 | 16 | Ez.e | 16 | Ez.height | 8 | Ez has bitmasks | HD | Ez | . | Err:520 | C.rg | |||||||||||
| C.s | 2 | C.RG | 32 | HD.x | 1 | Ez.b2 | 32 | Ez.f | 32 | Ez.w | 4 | E has enumerations | Ease | Ez | . | Ez. | C.gg | |||||||||||
| C.l | 4 | C.GG | 64 | HD.y | 2 | Ez.c2 | 64 | Ez.tx | 16 | Ez.h | 8 | Ez | . | Ez. | C.bg | |||||||||||||
| C.w | 2 | C.BG | 128 | HD.z | 4 | Ez.d2 | 128 | Ez.ty | 32 | Ez | . | Ez. | C.ag | |||||||||||||||
| C.AG | 256 | HD.alpha | 8 | Ez.a3 | 256 | Ez | . | Ez. | C.cg | |||||||||||||||||||
| C.CG | 512 | Ez.b3 | 512 | SVG rotate | Ez | . | Ez. | C.rb | ||||||||||||||||||||
| rgb() | C.RB | 1024 | lab() | Ez.c3 | 1024 | angle | 8 | Ez | . | Ez. | C.gb | |||||||||||||||||
| hsl() | C.GB | 2048 | oklab() | Ez.d3 | 2048 | Ez | . | Ez. | C.bb | |||||||||||||||||||
| hwb() | C.BB | 4096 | lch() | Ez.a4 | 4096 | Ez | . | Ez. | C.ab | |||||||||||||||||||
| C.AB | 8192 | oklch() | Ez.b4 | 8192 | Ez | . | Ez. | C.cb | ||||||||||||||||||||
| C.CB | 16384 | color() | Ez.c4 | 16384 | Ez | . | Ez. | C.ra | ||||||||||||||||||||
| C.RA | 32768 | Ez.d4 | 32768 | Ez | . | Ez. | C.ga | |||||||||||||||||||||
| C.GA | 65536 | Ez | . | Ez. | C.ba | |||||||||||||||||||||||
| C.BA | 131072 | * display-p3 and rec2020 use RGB nomenclature | Ez | . | Ez. | C.aa | ||||||||||||||||||||||
| C.AA | 262144 | Ez | . | Ez. | C.ca | |||||||||||||||||||||||
| C.CA | 524288 | Ez | . | Ez. | ||||||||||||||||||||||||
| const Ez | ||||
| Public properties | ||||
| rad | float | Math.PI / 180 | ||
| grad | float | 10 / 9 | ||
| turn | float | 1 / 360 | ||
| defZero | array | arguments for Ez.toNumber() in array form | ||
| grThan0 | array | |||
| notNeg | array | |||
| notZero | array | |||
| okEmptyUndef | array | for Ez.toArray() | ||
| undefGrThan0 | array | created for toNumber() in Pfactory.init() | ||
| undefNotZero | array | |||
| defGrThan0 | array | |||
| defNotNeg | array | |||
| intGrThan0 | array | |||
| intNotNeg | array | |||
| x | integer | bitmasks for masking SVG viewBox attribute arguments | ||
| y | integer | they work for other properties too… | ||
| z | integer | |||
| w | integer | |||
| h | integer | |||
| width | integer | |||
| height | integer | |||
| angle | integer | bitmask for SVG rotate() | ||
| Public methods | ||||
| is() | assigns a read-only property to an object in the format: isXXX | |||
| readOnly() | assigns a read-only property to an object | |||
| shallowClone() | returns a shallow clone of an object | |||
| newArray2D() | returns a new 2D array, optionally filled | |||
| swapDims() | swaps a 2D array's inner and outer dimensions | |||
| clamp() | clamps a value between a min and a max | |||
| comp() | complements a unit interval value = 1 - unit | |||
| compIf() | conditional version of comp() | |||
| unitOutOfBounds() | checks for out-of-bounds units in an array | |||
| promise() | instead of Promise.withResolvers() | |||
| initialCap() | returns a new string with the first character in upper case | |||
| toCamel() | returns a camelCase string based on the arg supplied | |||
| camelToKebab() | converts a camelCase string to kebab-case | |||
| kebabToCamel() | converts a kebab-case string to camelCase | |||
| kebabToSnake() | converts a kebab-case string to snake_case | |||
| toSum() | preset callback for Array.prototype.reduce() to sum numbers | |||
| toNumby() | soft numeric conversion, helps PBase and subclasses | |||
| toNumber() | numeric conversion with lots of options | |||
| toArray() | converts to an array from any number of types, many options | |||
| toElement() | validates elements and converts string to element by id | |||
| toElements() | converts to an array of elements | |||
| defaultToTrue() | converts undefined to true and everything else to boolean | |||
| noneToZero() | converts null to zero for Color.js coordinate arrays | |||
| "Protected" methods | ||||
| _mustBe() | error & error message generating functions | |||
| _mustBeErr() | ||||
| _cantBe() | ||||
| _cantBeErr() | ||||
| _cant() | ||||
| _cantErr() | ||||
| _only() | ||||
| _onlyErr() | ||||
| _mustAscendErr() | ||||
| _invalidErr() | ||||
| _isElmy() | validation functions | |||
| _validObj() | ||||
| _validFunc() | ||||
| _join() | helps Func/Prop.prototype.join() | |||
| _appendUnits() | validates as it applies string units to numbers | |||
| _dims() | counts array dimensions up to 2, non-array = 0, undefined = -1 | |||
| class PFactory | ||||
| name | type | description | ||
| Public static methods | ||||
| addAttributes() | ||||
| init() | ||||
| defer() | ||||
| toNumber() | ||||
| toArray() | ||||
| validObj() | ||||
| validFunc() | ||||
| bitmask() | ||||
| swapDims() | swaps 2D array dimensions, inner/outer | |||
| "Protected" static methods | ||||
| _isElmy() | ||||
| _toElement() | ||||
| _toElements() | ||||
| _stringToElm() | ||||
| _mustBeDef() | 'must be defined' error message maker | |||
| Private | ||||
| static properties | ||||
| #lengths | ||||
| #angles | ||||
| #waits | ||||
| #funcs | ||||
| #funcC | ||||
| #funcG | ||||
| #funcSR | ||||
| #funcN | ||||
| #funcL | ||||
| #funcA | ||||
| #func2 | ||||
| #funcT | ||||
| #funcTL | ||||
| #funcTA | ||||
| #funcT2 | ||||
| #color | ||||
| #svg | ||||
| #svgN | ||||
| #svg2 | ||||
| #css | ||||
| #cssN | ||||
| #cssL | ||||
| #cssTm | ||||
| #cssBg | ||||
| #css2 | ||||
| #cssL2 | ||||
| #html | ||||
| #htmlR | ||||
| #elmR | ||||
| #elmF | ||||
| #initialized | bool | set to true by init() | ||
| static methods | ||||
| #htmlLoop() | ||||
| #bitmask() | ||||
| #names() | ||||
| #add() | ||||
| #toElement() | ||||
| Current value vs CFunc - function/space: | 65,504 | 2000 | 60 | Functions | default | range | Firefox | Chrome | Firefox kebab-case & camelCase 8/31/2023 | Property | ||||||||||
| no color function or space conversion | CSS functions by space | color() spaces | color-mix() | 0.392 | 25,700 | 120,000 | 1,000 | <length> | 0 | accentColor | accentColor | accent-color | accentColor | <>*-* | ||||||
| you can avoid E.cV and animate all 3 args | rgb() | srgb | srgb | 0.145 | 9,480 | blur() | additiveSymbols | align-content | alignContent | |||||||||||
| else: link to colorjs converter | hsl() | srgb-linear | srgb-linear | 0.318 | 20,800 | drop-shadow() | alignContent | alignContent | align-items | alignItems | 86% | |||||||||
| Gradients: | hwb() | xyz | xyz | perspective() | alignItems | alignItems | align-self | alignSelf | 361 | |||||||||||
| won't animate hex or named colors | lab() | xyz-d50 | xyz-d50 | color(--acescg 0.392342452369321 0.144723986321446 0.392342452369321) | % | circle() | alignmentBaseline | animation | 60 | |||||||||||
| Single colors: | lch() | xyz-d65 | xyz-d65 | color(--acescg 25700 9480 20800) | % | ellipse() | alignSelf | alignSelf | animation-composition | animationComposition | 421 | |||||||||
| named colors in RGB, HSL, HWB | oklab() | display-p3 | lab | [ | 255 | [ | % | translate() | 0 | animation | animation | animation-delay | animationDelay | |||||||
| hex colors in RGB only | oklch() | a98-rgb | oklab | 83.6365386559 | 213 | 0.4799233824 | 0.3923424524 | % | translateX() | 0 | animationComposition | animationComposition | animation-direction | animationDirection | ||||||
| To set a named color as a destination: | prophoto-rgb | lch | 42.767553162 | 109 | 0.1925344493 | 0.1447239863 | % | translateY() | 0 | animationDelay | animationDelay | animation-duration | animationDuration | |||||||
| use the C object | rec2020 | oklch | 68.1414914409 | 174 | 0.3986378509 | 0.3175378603 | translateZ() | 0 | animationDirection | animationDirection | animation-fill-mode | animationFillMode | ||||||||
| hsl | color(srgb 83.637 42.768 68.141) | ] | mix | translate3d() | 0 | animationDuration | animationDuration | animation-iteration-count | animationIterationCount | |||||||||||
| hwb | animationFillMode | animationFillMode | animation-name | animationName | ||||||||||||||||
| <angle> | animationIterationCount | animationIterationCount | animation-play-state | animationPlayState | ||||||||||||||||
| Color.js animations | Color.js color spaces | Color.js id | Color.js token | CSS | Color.js only | <select> | hue-rotate() | 0 | animationName | animationName | animation-timing-function | animationTimingFunction | ||||||||
| all args always set, o.isSet = all args masked | Adobe® 98 RGB compatible a98rgb | a98rgb | a98-rgb | a98-rgb | a98-rgb | TRUE | Adobe® 98 RGB compatible a98rgb | rotate() | 0 | animationPlayState | animationPlayState | appearance | ||||||||
| o.colorjs or o.cjs property = Color instance | Linear Adobe® 98 RGB compatible | a98rgb-linear | --a98-rgb-linear | a98rgb-linear | a98rgb-linear | TRUE | Linear Adobe® 98 RGB compatible | rotateX() | 0 | animationRange | aspect-ratio | aspectRatio | ||||||||
| one Easer instance per color space, across elms | ACEScc | acescc | --acescc | acescc | acescc | TRUE | ACEScc | rotateY() | 0 | animationRangeEnd | backdrop-filter | backdropFilter | ||||||||
| multiple spaces = multiple Easy targets | ACEScg | acescg | --acescg | acescg | acescg | TRUE | ACEScg | rotateZ() | 0 | animationRangeStart | backface-visibility | backfaceVisibility | ||||||||
| 1 Color with >1 elms: | CAM16-JMh | cam16-jmh | --cam16-jmh | cam16-jmh | cam16-jmh | TRUE | CAM16-JMh | rotate3d() | 0 | animationTimeline | background | |||||||||
| either prop.get()/parse() or {cv:[[]]}/units | HCT | hct | --hct | hct | hct | TRUE | HCT | * arg[0] can be <number> | hsl(), hwb()* | 0 | animationTimingFunction | animationTimingFunction | background-attachment | backgroundAttachment | ||||||
| alpha can vary as a plug across elements | HPLuv | hpluv | --hpluv | hpluv | hpluv | TRUE | HPLuv | † arg[2] can be <number> | lch(), oklch()† | 0 | appearance | appearance | background-blend-mode | backgroundBlendMode | ||||||
| plug set differently than plugCV | HSL | hsl | hsl() | hsl() | hsl() | TRUE | HSL | skew() | 0 | aspectRatio | appRegion | background-clip | backgroundClip | |||||||
| all numbers, no strings, no units | HSLuv | hsluv | --hsluv | hsluv | hsluv | TRUE | HSLuv | skewX() | 0 | ascentOverride | background-color | backgroundColor | ||||||||
| afcru() sets o.c = CFunc.A + 1, o.r = CFunc.A; | HSV | hsv | --hsv | hsv | hsv | TRUE | HSV | skewY() | 0 | aspectRatio | background-image | backgroundImage | ||||||||
| optional() must use mask[CFunc.A] to set o.c | HWB | hwb | hwb() | hwb() | hwb() | TRUE | HWB | backdropFilter | backdropFilter | background-origin | backgroundOrigin | |||||||||
| maskCV() doesn't need to convert to numbers | ICTCP | ictcp | ictcp | ictcp | ictcp | TRUE | ICTCP | <number> | backfaceVisibility | backfaceVisibility | background-position | backgroundPosition | ||||||||
| plugCV() no separator, just args as Number | Jzazbz | jzazbz | jzazbz | jzazbz | jzazbz | TRUE | Jzazbz | % | brightness() | 1 | background | background | background-position-x | backgroundPositionX | ||||||
| JzCzHz | jzczhz | jzczhz | jzczhz | jzczhz | TRUE | JzCzHz | % | contrast() | 1 | backgroundAttachment | backgroundAttachment | background-position-y | backgroundPositionY | |||||||
| Gradients & color-mix() with Color.js | Lab | lab | lab() | lab() | lab() | TRUE | Lab | % | grayscale() | 1 | backgroundBlendMode | backgroundBlendMode | background-repeat | backgroundRepeat | ||||||
| a mask array for each Color instance | Lab D65 | lab-d65 | lab-d65 | lab-d65 | oklab() | TRUE | Lab D65 | % | invert() | 0 | backgroundClip | backgroundClip | background-size | backgroundSize | ||||||
| Oklab | oklab | oklab() | oklab() | lab-d65 | TRUE | Oklab | % | opacity() | 1 | backgroundColor | backgroundColor | baseline-source | baselineSource | |||||||
| o.currentValue | LCH | lch | lch() | lch() | lch() | TRUE | LCH | % | saturate() | 1 | backgroundImage | backgroundImage | block-size | blockSize | ||||||
| Must be array by elm (unless 1 elm & (string | 1 arg)) | Oklch | oklch | oklch() | oklch() | oklch() | TRUE | Oklch | % | sepia() | 0 | backgroundOrigin | backgroundOrigin | border | |||||||
| 1D: | LChuv | lchuv | --lchuv | lchuv | lchuv | TRUE | LChuv | scale() | 1 | backgroundPosition | backgroundPosition | border-block | borderBlock | |||||||
| String - full property value (or minimally parsable) | Luv | luv | --luv | luv | luv | TRUE | Luv | scale3d() | 1 | backgroundPositionX | backgroundPositionX | border-block-color | borderBlockColor | |||||||
| Number - full property value w/o units, 1 arg only | P3 | p3 | display-p3 | display-p3 | display-p3 | TRUE | P3 | Okhsl | % | color funcs | backgroundPositionY | backgroundPositionY | border-block-end | borderBlockEnd | ||||||
| Color - [...o.cjs[o.space], o.cjs.alpha] | Linear P3 | p3-linear | --display-p3-linear | p3-linear | p3-linear | TRUE | Linear P3 | Okhsv | matrix() | (1,0,0,1,0,0) | backgroundRepeat | backgroundRepeat | border-block-end-color | borderBlockEndColor | ||||||
| 2D: | ProPhoto | prophoto | prophoto-rgb | prophoto-rgb | prophoto-rgb | TRUE | ProPhoto | matrix3d() | backgroundRepeatX | border-block-end-style | borderBlockEndStyle | |||||||||
| String = arg with units | Linear ProPhoto | prophoto-linear | --prophoto-rgb-linear | prophoto-linear | prophoto-linear | TRUE | Linear ProPhoto | backgroundRepeatY | border-block-end-width | borderBlockEndWidth | ||||||||||
| Number = arg w/o units | REC.2020 | rec2020 | --rec2020 | rec2020 | rec2020 | TRUE | REC.2020 | backgroundSize | backgroundSize | border-block-start | borderBlockStart | |||||||||
| interior (byArg) dimension: | Linear REC.2020 | rec2020-linear | --rec2020-linear | rec2020-linear | rec2020-linear | TRUE | Linear REC.2020 | baselineShift | border-block-start-color | borderBlockStartColor | ||||||||||
| no validation of arr.length | REC.2100-HLG | rec2100hlg | rec2100hlg | rec2100hlg | rec2100hlg | TRUE | REC.2100-HLG | baselineSource | baselineSource | border-block-start-style | borderBlockStartStyle | |||||||||
| can be sparse if for plug only | REC.2100-PQ | rec2100pq | rec2100pq | rec2100pq | rec2100pq | TRUE | REC.2100-PQ | basePalette | border-block-start-width | borderBlockStartWidth | ||||||||||
| sRGB | srgb | rgb() | rgb() | rgb() | TRUE | sRGB | blockSize | blockSize | border-block-style | borderBlockStyle | ||||||||||
| Linear sRGB | srgb-linear | srgb-linear | srgb-linear | srgb-linear | TRUE | Linear sRGB | border | border | border-block-width | borderBlockWidth | ||||||||||
| XYZ (D65) | xyz, xyz-d65 | xyz, xyz-d65 | xyz, xyz-d65 | xyz-d50 | FALSE | XYZ D65 | borderBlock | borderBlock | border-bottom | borderBottom | ||||||||||
| XYZ D50 | xyz-d50 | xyz-d50 | xyz-d50 | xyz-d65 | TRUE | XYZ D50 | borderBlockColor | borderBlockColor | border-bottom-color | borderBottomColor | ||||||||||
| Absolute XYZ D65 | xyz-abs-d65 | --xyz-abs-d65 | xyz-abs-d65 | xyz-abs-d65 | TRUE | Absolute XYZ D65 | borderBlockEnd | borderBlockEnd | border-bottom-left-radius | borderBottomLeftRadius | ||||||||||
| XYZ D65 | borderBlockEndColor | borderBlockEndColor | border-bottom-right-radius | borderBottomRightRadius | ||||||||||||||||
| borderBlockEndStyle | borderBlockEndStyle | border-bottom-style | borderBottomStyle | |||||||||||||||||
| borderBlockEndWidth | borderBlockEndWidth | border-bottom-width | borderBottomWidth | |||||||||||||||||
| borderBlockStart | borderBlockStart | border-collapse | borderCollapse | |||||||||||||||||
| borderBlockStartColor | borderBlockStartColor | border-color | borderColor | |||||||||||||||||
| borderBlockStartStyle | borderBlockStartStyle | border-end-end-radius | borderEndEndRadius | |||||||||||||||||
| borderBlockStartWidth | borderBlockStartWidth | border-end-start-radius | borderEndStartRadius | |||||||||||||||||
| borderBlockStyle | borderBlockStyle | border-image | borderImage | |||||||||||||||||
| borderBlockWidth | borderBlockWidth | border-image-outset | borderImageOutset | |||||||||||||||||
| borderBottom | borderBottom | border-image-repeat | borderImageRepeat | |||||||||||||||||
| borderBottomColor | borderBottomColor | border-image-slice | borderImageSlice | |||||||||||||||||
| borderBottomLeftRadius | borderBottomLeftRadius | border-image-source | borderImageSource | |||||||||||||||||
| borderBottomRightRadius | borderBottomRightRadius | border-image-width | borderImageWidth | |||||||||||||||||
| borderBottomStyle | borderBottomStyle | border-inline | borderInline | |||||||||||||||||
| borderBottomWidth | borderBottomWidth | border-inline-color | borderInlineColor | |||||||||||||||||
| borderCollapse | borderCollapse | border-inline-end | borderInlineEnd | |||||||||||||||||
| borderColor | borderColor | border-inline-end-color | borderInlineEndColor | |||||||||||||||||
| borderEndEndRadius | borderEndEndRadius | border-inline-end-style | borderInlineEndStyle | |||||||||||||||||
| borderEndStartRadius | borderEndStartRadius | border-inline-end-width | borderInlineEndWidth | |||||||||||||||||
| borderImage | borderImage | border-inline-start | borderInlineStart | |||||||||||||||||
| borderImageOutset | borderImageOutset | border-inline-start-color | borderInlineStartColor | |||||||||||||||||
| borderImageRepeat | borderImageRepeat | border-inline-start-style | borderInlineStartStyle | |||||||||||||||||
| borderImageSlice | borderImageSlice | border-inline-start-width | borderInlineStartWidth | |||||||||||||||||
| borderImageSource | borderImageSource | border-inline-style | borderInlineStyle | |||||||||||||||||
| borderImageWidth | borderImageWidth | border-inline-width | borderInlineWidth | |||||||||||||||||
| borderInline | borderInline | border-left | borderLeft | |||||||||||||||||
| borderInlineColor | borderInlineColor | border-left-color | borderLeftColor | |||||||||||||||||
| borderInlineEnd | borderInlineEnd | border-left-style | borderLeftStyle | |||||||||||||||||
| borderInlineEndColor | borderInlineEndColor | border-left-width | borderLeftWidth | |||||||||||||||||
| borderInlineEndStyle | borderInlineEndStyle | border-radius | borderRadius | |||||||||||||||||
| borderInlineEndWidth | borderInlineEndWidth | border-right | borderRight | |||||||||||||||||
| borderInlineStart | borderInlineStart | border-right-color | borderRightColor | |||||||||||||||||
| borderInlineStartColor | borderInlineStartColor | border-right-style | borderRightStyle | |||||||||||||||||
| borderInlineStartStyle | borderInlineStartStyle | border-right-width | borderRightWidth | |||||||||||||||||
| borderInlineStartWidth | borderInlineStartWidth | border-spacing | borderSpacing | |||||||||||||||||
| borderInlineStyle | borderInlineStyle | border-start-end-radius | borderStartEndRadius | |||||||||||||||||
| borderInlineWidth | borderInlineWidth | border-start-start-radius | borderStartStartRadius | |||||||||||||||||
| borderLeft | borderLeft | border-style | borderStyle | |||||||||||||||||
| borderLeftColor | borderLeftColor | border-top | borderTop | |||||||||||||||||
| borderLeftStyle | borderLeftStyle | border-top-color | borderTopColor | |||||||||||||||||
| borderLeftWidth | borderLeftWidth | border-top-left-radius | borderTopLeftRadius | |||||||||||||||||
| borderRadius | borderRadius | border-top-right-radius | borderTopRightRadius | |||||||||||||||||
| borderRight | borderRight | border-top-style | borderTopStyle | |||||||||||||||||
| borderRightColor | borderRightColor | border-top-width | borderTopWidth | |||||||||||||||||
| borderRightStyle | borderRightStyle | border-width | borderWidth | |||||||||||||||||
| borderRightWidth | borderRightWidth | bottom | ||||||||||||||||||
| borderSpacing | borderSpacing | box-decoration-break | boxDecorationBreak | |||||||||||||||||
| borderStartEndRadius | borderStartEndRadius | box-shadow | boxShadow | |||||||||||||||||
| borderStartStartRadius | borderStartStartRadius | box-sizing | boxSizing | |||||||||||||||||
| borderStyle | borderStyle | break-after | breakAfter | |||||||||||||||||
| borderTop | borderTop | break-before | breakBefore | |||||||||||||||||
| borderTopColor | borderTopColor | break-inside | breakInside | |||||||||||||||||
| borderTopLeftRadius | borderTopLeftRadius | caption-side | captionSide | |||||||||||||||||
| borderTopRightRadius | borderTopRightRadius | caret-color | caretColor | |||||||||||||||||
| borderTopStyle | borderTopStyle | clear | ||||||||||||||||||
| borderTopWidth | borderTopWidth | clip | ||||||||||||||||||
| borderWidth | borderWidth | clip-path | clipPath | |||||||||||||||||
| bottom | bottom | clip-rule | clipRule | |||||||||||||||||
| boxDecorationBreak | color | |||||||||||||||||||
| boxShadow | boxShadow | color-adjust | colorAdjust | |||||||||||||||||
| boxSizing | boxSizing | color-interpolation | colorInterpolation | |||||||||||||||||
| breakAfter | breakAfter | color-interpolation-filters | colorInterpolationFilters | |||||||||||||||||
| breakBefore | breakBefore | color-scheme | colorScheme | |||||||||||||||||
| breakInside | breakInside | column-count | columnCount | |||||||||||||||||
| bufferedRendering | column-fill | columnFill | ||||||||||||||||||
| captionSide | captionSide | column-gap | columnGap | |||||||||||||||||
| caretColor | caretColor | column-rule | columnRule | |||||||||||||||||
| clear | clear | column-rule-color | columnRuleColor | |||||||||||||||||
| clip | clip | column-rule-style | columnRuleStyle | |||||||||||||||||
| clipPath | clipPath | column-rule-width | columnRuleWidth | |||||||||||||||||
| clipRule | clipRule | columns | ||||||||||||||||||
| color | color | column-span | columnSpan | |||||||||||||||||
| colorAdjust | column-width | columnWidth | ||||||||||||||||||
| colorInterpolation | colorInterpolation | contain | ||||||||||||||||||
| colorInterpolationFilters | colorInterpolationFilters | container | ||||||||||||||||||
| colorRendering | container-name | containerName | ||||||||||||||||||
| colorScheme | colorScheme | container-type | containerType | |||||||||||||||||
| columnCount | columnCount | contain-intrinsic-block-size | containIntrinsicBlockSize | |||||||||||||||||
| columnFill | columnFill | contain-intrinsic-height | containIntrinsicHeight | |||||||||||||||||
| columnGap | columnGap | contain-intrinsic-inline-size | containIntrinsicInlineSize | |||||||||||||||||
| columnRule | columnRule | contain-intrinsic-size | containIntrinsicSize | |||||||||||||||||
| columnRuleColor | columnRuleColor | contain-intrinsic-width | containIntrinsicWidth | |||||||||||||||||
| columnRuleStyle | columnRuleStyle | content | ||||||||||||||||||
| columnRuleWidth | columnRuleWidth | counter-increment | counterIncrement | |||||||||||||||||
| columns | columns | counter-reset | counterReset | |||||||||||||||||
| columnSpan | columnSpan | counter-set | counterSet | |||||||||||||||||
| columnWidth | columnWidth | dominant-baseline | cssFloat | |||||||||||||||||
| contain | contain | cursor | ||||||||||||||||||
| container | container | cx | ||||||||||||||||||
| containerName | containerName | cy | ||||||||||||||||||
| containerType | containerType | d | ||||||||||||||||||
| containIntrinsicBlockSize | containIntrinsicBlockSize | direction | ||||||||||||||||||
| containIntrinsicHeight | containIntrinsicHeight | display | ||||||||||||||||||
| containIntrinsicInlineSize | containIntrinsicInlineSize | dominantBaseline | ||||||||||||||||||
| containIntrinsicSize | containIntrinsicSize | empty-cells | emptyCells | |||||||||||||||||
| containIntrinsicWidth | containIntrinsicWidth | fill | ||||||||||||||||||
| content | content | fill-opacity | fillOpacity | |||||||||||||||||
| contentVisibility | fill-rule | fillRule | ||||||||||||||||||
| counterIncrement | counterIncrement | filter | ||||||||||||||||||
| counterReset | counterReset | flex | ||||||||||||||||||
| counterSet | counterSet | flex-basis | flexBasis | |||||||||||||||||
| cssFloat | cssFloat | flex-direction | flexDirection | |||||||||||||||||
| cssText | flex-flow | flexFlow | ||||||||||||||||||
| cursor | cursor | flex-grow | flexGrow | |||||||||||||||||
| cx | cx | flex-shrink | flexShrink | |||||||||||||||||
| cy | cy | flex-wrap | flexWrap | |||||||||||||||||
| d | d | float | ||||||||||||||||||
| descentOverride | flood-color | floodColor | ||||||||||||||||||
| direction | direction | flood-opacity | floodOpacity | |||||||||||||||||
| display | display | font | ||||||||||||||||||
| dominantBaseline | dominantBaseline | font-family | fontFamily | |||||||||||||||||
| emptyCells | emptyCells | font-feature-settings | fontFeatureSettings | |||||||||||||||||
| fallback | font-kerning | fontKerning | ||||||||||||||||||
| fill | fill | font-language-override | fontLanguageOverride | |||||||||||||||||
| fillOpacity | fillOpacity | font-optical-sizing | fontOpticalSizing | |||||||||||||||||
| fillRule | fillRule | font-palette | fontPalette | |||||||||||||||||
| filter | filter | font-size | fontSize | |||||||||||||||||
| flex | flex | font-size-adjust | fontSizeAdjust | |||||||||||||||||
| flexBasis | flexBasis | font-stretch | fontStretch | |||||||||||||||||
| flexDirection | flexDirection | font-style | fontStyle | |||||||||||||||||
| flexFlow | flexFlow | font-synthesis | fontSynthesis | |||||||||||||||||
| flexGrow | flexGrow | font-synthesis-small-caps | fontSynthesisSmallCaps | |||||||||||||||||
| flexShrink | flexShrink | font-synthesis-style | fontSynthesisStyle | |||||||||||||||||
| flexWrap | flexWrap | font-synthesis-weight | fontSynthesisWeight | |||||||||||||||||
| float | float | font-variant | fontVariant | |||||||||||||||||
| floodColor | floodColor | font-variant-alternates | fontVariantAlternates | |||||||||||||||||
| floodOpacity | floodOpacity | font-variant-caps | fontVariantCaps | |||||||||||||||||
| font | font | font-variant-east-asian | fontVariantEastAsian | |||||||||||||||||
| fontDisplay | font-variant-ligatures | fontVariantLigatures | ||||||||||||||||||
| fontFamily | fontFamily | font-variant-numeric | fontVariantNumeric | |||||||||||||||||
| fontFeatureSettings | fontFeatureSettings | font-variant-position | fontVariantPosition | |||||||||||||||||
| fontKerning | fontKerning | font-variation-settings | fontVariationSettings | |||||||||||||||||
| fontLanguageOverride | font-weight | fontWeight | ||||||||||||||||||
| fontOpticalSizing | fontOpticalSizing | forced-color-adjust | forcedColorAdjust | |||||||||||||||||
| fontPalette | fontPalette | gap | ||||||||||||||||||
| fontSize | fontSize | grid | ||||||||||||||||||
| fontSizeAdjust | grid-area | gridArea | ||||||||||||||||||
| fontStretch | fontStretch | grid-auto-columns | gridAutoColumns | |||||||||||||||||
| fontStyle | fontStyle | grid-auto-flow | gridAutoFlow | |||||||||||||||||
| fontSynthesis | fontSynthesis | grid-auto-rows | gridAutoRows | |||||||||||||||||
| fontSynthesisSmallCaps | fontSynthesisSmallCaps | grid-column | gridColumn | |||||||||||||||||
| fontSynthesisStyle | fontSynthesisStyle | grid-column-end | gridColumnEnd | |||||||||||||||||
| fontSynthesisWeight | fontSynthesisWeight | grid-column-gap | gridColumnGap | |||||||||||||||||
| fontVariant | fontVariant | grid-column-start | gridColumnStart | |||||||||||||||||
| fontVariantAlternates | fontVariantAlternates | grid-gap | gridGap | |||||||||||||||||
| fontVariantCaps | fontVariantCaps | grid-row | gridRow | |||||||||||||||||
| fontVariantEastAsian | fontVariantEastAsian | grid-row-end | gridRowEnd | |||||||||||||||||
| fontVariantLigatures | fontVariantLigatures | grid-row-gap | gridRowGap | |||||||||||||||||
| fontVariantNumeric | fontVariantNumeric | grid-row-start | gridRowStart | |||||||||||||||||
| fontVariantPosition | grid-template | gridTemplate | ||||||||||||||||||
| fontVariationSettings | fontVariationSettings | grid-template-areas | gridTemplateAreas | |||||||||||||||||
| fontWeight | fontWeight | grid-template-columns | gridTemplateColumns | |||||||||||||||||
| forcedColorAdjust | forcedColorAdjust | grid-template-rows | gridTemplateRows | |||||||||||||||||
| gap | gap | height | ||||||||||||||||||
| grid | grid | hyphenate-character | hyphenateCharacter | |||||||||||||||||
| gridArea | gridArea | hyphens | ||||||||||||||||||
| gridAutoColumns | gridAutoColumns | image-orientation | imageOrientation | |||||||||||||||||
| gridAutoFlow | gridAutoFlow | image-rendering | imageRendering | |||||||||||||||||
| gridAutoRows | gridAutoRows | ime-mode | imeMode | |||||||||||||||||
| gridColumn | gridColumn | inline-size | inlineSize | |||||||||||||||||
| gridColumnEnd | gridColumnEnd | inset | ||||||||||||||||||
| gridColumnGap | gridColumnGap | inset-block | insetBlock | |||||||||||||||||
| gridColumnStart | gridColumnStart | inset-block-end | insetBlockEnd | |||||||||||||||||
| gridGap | gridGap | inset-block-start | insetBlockStart | |||||||||||||||||
| gridRow | gridRow | inset-inline | insetInline | |||||||||||||||||
| gridRowEnd | gridRowEnd | inset-inline-end | insetInlineEnd | |||||||||||||||||
| gridRowGap | gridRowGap | inset-inline-start | insetInlineStart | |||||||||||||||||
| gridRowStart | gridRowStart | isolation | ||||||||||||||||||
| gridTemplate | gridTemplate | justify-content | justifyContent | |||||||||||||||||
| gridTemplateAreas | gridTemplateAreas | justify-items | justifyItems | |||||||||||||||||
| gridTemplateColumns | gridTemplateColumns | justify-self | justifySelf | |||||||||||||||||
| gridTemplateRows | gridTemplateRows | left | ||||||||||||||||||
| height | height | letter-spacing | letterSpacing | |||||||||||||||||
| hyphenateCharacter | hyphenateCharacter | lighting-color | lightingColor | |||||||||||||||||
| hyphenateLimitChars | line-break | lineBreak | ||||||||||||||||||
| hyphens | hyphens | line-height | lineHeight | |||||||||||||||||
| imageOrientation | imageOrientation | list-style | listStyle | |||||||||||||||||
| imageRendering | imageRendering | list-style-image | listStyleImage | |||||||||||||||||
| imeMode | list-style-position | listStylePosition | ||||||||||||||||||
| inherits | list-style-type | listStyleType | ||||||||||||||||||
| initialLetter | margin | |||||||||||||||||||
| initialValue | margin-block | marginBlock | ||||||||||||||||||
| inlineSize | inlineSize | margin-block-end | marginBlockEnd | |||||||||||||||||
| inset | inset | margin-block-start | marginBlockStart | |||||||||||||||||
| insetBlock | insetBlock | margin-bottom | marginBottom | |||||||||||||||||
| insetBlockEnd | insetBlockEnd | margin-inline | marginInline | |||||||||||||||||
| insetBlockStart | insetBlockStart | margin-inline-end | marginInlineEnd | |||||||||||||||||
| insetInline | insetInline | margin-inline-start | marginInlineStart | |||||||||||||||||
| insetInlineEnd | insetInlineEnd | margin-left | marginLeft | |||||||||||||||||
| insetInlineStart | insetInlineStart | margin-right | marginRight | |||||||||||||||||
| isolation | isolation | margin-top | marginTop | |||||||||||||||||
| justifyContent | justifyContent | marker | ||||||||||||||||||
| justifyItems | justifyItems | marker-end | markerEnd | |||||||||||||||||
| justifySelf | justifySelf | marker-mid | markerMid | |||||||||||||||||
| left | left | marker-start | markerStart | |||||||||||||||||
| length | mask | |||||||||||||||||||
| letterSpacing | letterSpacing | mask-clip | maskClip | |||||||||||||||||
| lightingColor | lightingColor | mask-composite | maskComposite | |||||||||||||||||
| lineBreak | lineBreak | mask-image | maskImage | |||||||||||||||||
| lineGapOverride | mask-mode | maskMode | ||||||||||||||||||
| lineHeight | lineHeight | mask-origin | maskOrigin | |||||||||||||||||
| listStyle | listStyle | mask-position | maskPosition | |||||||||||||||||
| listStyleImage | listStyleImage | mask-position-x | maskPositionX | |||||||||||||||||
| listStylePosition | listStylePosition | mask-position-y | maskPositionY | |||||||||||||||||
| listStyleType | listStyleType | mask-repeat | maskRepeat | |||||||||||||||||
| margin | margin | mask-size | maskSize | |||||||||||||||||
| marginBlock | marginBlock | mask-type | maskType | |||||||||||||||||
| marginBlockEnd | marginBlockEnd | math-depth | mathDepth | |||||||||||||||||
| marginBlockStart | marginBlockStart | math-style | mathStyle | |||||||||||||||||
| marginBottom | marginBottom | max-block-size | maxBlockSize | |||||||||||||||||
| marginInline | marginInline | max-height | maxHeight | |||||||||||||||||
| marginInlineEnd | marginInlineEnd | max-inline-size | maxInlineSize | |||||||||||||||||
| marginInlineStart | marginInlineStart | max-width | maxWidth | |||||||||||||||||
| marginLeft | marginLeft | min-block-size | minBlockSize | |||||||||||||||||
| marginRight | marginRight | min-height | minHeight | |||||||||||||||||
| marginTop | marginTop | min-inline-size | minInlineSize | |||||||||||||||||
| marker | marker | min-width | minWidth | |||||||||||||||||
| markerEnd | markerEnd | mix-blend-mode | mixBlendMode | |||||||||||||||||
| markerMid | markerMid | object-fit | objectFit | |||||||||||||||||
| markerStart | markerStart | object-position | objectPosition | |||||||||||||||||
| mask | mask | offset | ||||||||||||||||||
| maskClip | offset-anchor | offsetAnchor | ||||||||||||||||||
| maskComposite | offset-distance | offsetDistance | ||||||||||||||||||
| maskImage | offset-path | offsetPath | ||||||||||||||||||
| maskMode | offset-rotate | offsetRotate | ||||||||||||||||||
| maskOrigin | opacity | |||||||||||||||||||
| maskPosition | order | |||||||||||||||||||
| maskPositionX | outline | |||||||||||||||||||
| maskPositionY | outline-color | outlineColor | ||||||||||||||||||
| maskRepeat | outline-offset | outlineOffset | ||||||||||||||||||
| maskSize | outline-style | outlineStyle | ||||||||||||||||||
| maskType | maskType | outline-width | outlineWidth | |||||||||||||||||
| mathDepth | mathDepth | overflow | ||||||||||||||||||
| mathShift | overflow-anchor | overflowAnchor | ||||||||||||||||||
| mathStyle | mathStyle | overflow-block | overflowBlock | |||||||||||||||||
| maxBlockSize | maxBlockSize | overflow-clip-margin | overflowClipMargin | |||||||||||||||||
| maxHeight | maxHeight | overflow-inline | overflowInline | |||||||||||||||||
| maxInlineSize | maxInlineSize | overflow-wrap | overflowWrap | |||||||||||||||||
| maxWidth | maxWidth | overflow-x | overflowX | |||||||||||||||||
| minBlockSize | minBlockSize | overflow-y | overflowY | |||||||||||||||||
| minHeight | minHeight | overscroll-behavior | overscrollBehavior | |||||||||||||||||
| minInlineSize | minInlineSize | overscroll-behavior-block | overscrollBehaviorBlock | |||||||||||||||||
| minWidth | minWidth | overscroll-behavior-inline | overscrollBehaviorInline | |||||||||||||||||
| mixBlendMode | mixBlendMode | overscroll-behavior-x | overscrollBehaviorX | |||||||||||||||||
| objectFit | objectFit | overscroll-behavior-y | overscrollBehaviorY | |||||||||||||||||
| objectPosition | objectPosition | padding | ||||||||||||||||||
| objectViewBox | padding-block | paddingBlock | ||||||||||||||||||
| offset | offset | padding-block-end | paddingBlockEnd | |||||||||||||||||
| offsetAnchor | offsetAnchor | padding-block-start | paddingBlockStart | |||||||||||||||||
| offsetDistance | offsetDistance | padding-bottom | paddingBottom | |||||||||||||||||
| offsetPath | offsetPath | padding-inline | paddingInline | |||||||||||||||||
| offsetPosition | padding-inline-end | paddingInlineEnd | ||||||||||||||||||
| offsetRotate | offsetRotate | padding-inline-start | paddingInlineStart | |||||||||||||||||
| opacity | opacity | padding-left | paddingLeft | |||||||||||||||||
| order | order | padding-right | paddingRight | |||||||||||||||||
| outline | outline | padding-top | paddingTop | |||||||||||||||||
| outlineColor | outlineColor | page | ||||||||||||||||||
| outlineOffset | outlineOffset | page-break-after | pageBreakAfter | |||||||||||||||||
| outlineStyle | outlineStyle | page-break-before | pageBreakBefore | |||||||||||||||||
| outlineWidth | outlineWidth | page-break-inside | pageBreakInside | |||||||||||||||||
| overflow | overflow | paint-order | paintOrder | |||||||||||||||||
| overflowAnchor | overflowAnchor | perspective | ||||||||||||||||||
| overflowBlock | perspective-origin | perspectiveOrigin | ||||||||||||||||||
| overflowClipMargin | overflowClipMargin | place-content | placeContent | |||||||||||||||||
| overflowInline | place-items | placeItems | ||||||||||||||||||
| overflowWrap | overflowWrap | place-self | placeSelf | |||||||||||||||||
| overflowX | overflowX | pointer-events | pointerEvents | |||||||||||||||||
| overflowY | overflowY | print-color-adjust | position | |||||||||||||||||
| overrideColors | printColorAdjust | |||||||||||||||||||
| overscrollBehavior | overscrollBehavior | quotes | ||||||||||||||||||
| overscrollBehaviorBlock | overscrollBehaviorBlock | r | ||||||||||||||||||
| overscrollBehaviorInline | overscrollBehaviorInline | resize | ||||||||||||||||||
| overscrollBehaviorX | overscrollBehaviorX | right | ||||||||||||||||||
| overscrollBehaviorY | overscrollBehaviorY | rotate | ||||||||||||||||||
| padding | padding | row-gap | rowGap | |||||||||||||||||
| paddingBlock | paddingBlock | rx | ||||||||||||||||||
| paddingBlockEnd | paddingBlockEnd | ry | ||||||||||||||||||
| paddingBlockStart | paddingBlockStart | scale | ||||||||||||||||||
| paddingBottom | paddingBottom | scrollbar-color | scrollbarColor | |||||||||||||||||
| paddingInline | paddingInline | scrollbar-gutter | scrollbarGutter | |||||||||||||||||
| paddingInlineEnd | paddingInlineEnd | scrollbar-width | scrollbarWidth | |||||||||||||||||
| paddingInlineStart | paddingInlineStart | scroll-behavior | scrollBehavior | |||||||||||||||||
| paddingLeft | paddingLeft | scroll-margin | scrollMargin | |||||||||||||||||
| paddingRight | paddingRight | scroll-margin-block | scrollMarginBlock | |||||||||||||||||
| paddingTop | paddingTop | scroll-margin-block-end | scrollMarginBlockEnd | |||||||||||||||||
| page | page | scroll-margin-block-start | scrollMarginBlockStart | |||||||||||||||||
| pageBreakAfter | pageBreakAfter | scroll-margin-bottom | scrollMarginBottom | |||||||||||||||||
| pageBreakBefore | pageBreakBefore | scroll-margin-inline | scrollMarginInline | |||||||||||||||||
| pageBreakInside | pageBreakInside | scroll-margin-inline-end | scrollMarginInlineEnd | |||||||||||||||||
| pageOrientation | scroll-margin-inline-start | scrollMarginInlineStart | ||||||||||||||||||
| paintOrder | paintOrder | scroll-margin-left | scrollMarginLeft | |||||||||||||||||
| perspective | perspective | scroll-margin-right | scrollMarginRight | |||||||||||||||||
| perspectiveOrigin | perspectiveOrigin | scroll-margin-top | scrollMarginTop | |||||||||||||||||
| placeContent | placeContent | scroll-padding | scrollPadding | |||||||||||||||||
| placeItems | placeItems | scroll-padding-block | scrollPaddingBlock | |||||||||||||||||
| placeSelf | placeSelf | scroll-padding-block-end | scrollPaddingBlockEnd | |||||||||||||||||
| pointerEvents | pointerEvents | scroll-padding-block-start | scrollPaddingBlockStart | |||||||||||||||||
| position | position | scroll-padding-bottom | scrollPaddingBottom | |||||||||||||||||
| printColorAdjust | scroll-padding-inline | scrollPaddingInline | ||||||||||||||||||
| quotes | quotes | scroll-padding-inline-end | scrollPaddingInlineEnd | |||||||||||||||||
| r | r | scroll-padding-inline-start | scrollPaddingInlineStart | |||||||||||||||||
| resize | resize | scroll-padding-left | scrollPaddingLeft | |||||||||||||||||
| right | right | scroll-padding-right | scrollPaddingRight | |||||||||||||||||
| rotate | rotate | scroll-padding-top | scrollPaddingTop | |||||||||||||||||
| rowGap | rowGap | scroll-snap-align | scrollSnapAlign | |||||||||||||||||
| rx | rx | scroll-snap-stop | scrollSnapStop | |||||||||||||||||
| ry | ry | scroll-snap-type | scrollSnapType | |||||||||||||||||
| scale | scale | shape-image-threshold | shapeImageThreshold | |||||||||||||||||
| scrollbarColor | shape-margin | shapeMargin | ||||||||||||||||||
| scrollbarGutter | scrollbarGutter | shape-outside | shapeOutside | |||||||||||||||||
| scrollbarWidth | shape-rendering | shapeRendering | ||||||||||||||||||
| scrollBehavior | scrollBehavior | stop-color | stopColor | |||||||||||||||||
| scrollMargin | scrollMargin | stop-opacity | stopOpacity | |||||||||||||||||
| scrollMarginBlock | scrollMarginBlock | stroke | ||||||||||||||||||
| scrollMarginBlockEnd | scrollMarginBlockEnd | stroke-dasharray | strokeDasharray | |||||||||||||||||
| scrollMarginBlockStart | scrollMarginBlockStart | stroke-dashoffset | strokeDashoffset | |||||||||||||||||
| scrollMarginBottom | scrollMarginBottom | stroke-linecap | strokeLinecap | |||||||||||||||||
| scrollMarginInline | scrollMarginInline | stroke-linejoin | strokeLinejoin | |||||||||||||||||
| scrollMarginInlineEnd | scrollMarginInlineEnd | stroke-miterlimit | strokeMiterlimit | |||||||||||||||||
| scrollMarginInlineStart | scrollMarginInlineStart | stroke-opacity | strokeOpacity | |||||||||||||||||
| scrollMarginLeft | scrollMarginLeft | stroke-width | strokeWidth | |||||||||||||||||
| scrollMarginRight | scrollMarginRight | table-layout | tableLayout | |||||||||||||||||
| scrollMarginTop | scrollMarginTop | tab-size | tabSize | |||||||||||||||||
| scrollPadding | scrollPadding | text-align | textAlign | |||||||||||||||||
| scrollPaddingBlock | scrollPaddingBlock | text-align-last | textAlignLast | |||||||||||||||||
| scrollPaddingBlockEnd | scrollPaddingBlockEnd | text-anchor | textAnchor | |||||||||||||||||
| scrollPaddingBlockStart | scrollPaddingBlockStart | text-combine-upright | textCombineUpright | |||||||||||||||||
| scrollPaddingBottom | scrollPaddingBottom | text-decoration | textDecoration | |||||||||||||||||
| scrollPaddingInline | scrollPaddingInline | text-decoration-color | textDecorationColor | |||||||||||||||||
| scrollPaddingInlineEnd | scrollPaddingInlineEnd | text-decoration-line | textDecorationLine | |||||||||||||||||
| scrollPaddingInlineStart | scrollPaddingInlineStart | text-decoration-skip-ink | textDecorationSkipInk | |||||||||||||||||
| scrollPaddingLeft | scrollPaddingLeft | text-decoration-style | textDecorationStyle | |||||||||||||||||
| scrollPaddingRight | scrollPaddingRight | text-decoration-thickness | textDecorationThickness | |||||||||||||||||
| scrollPaddingTop | scrollPaddingTop | text-emphasis | textEmphasis | |||||||||||||||||
| scrollSnapAlign | scrollSnapAlign | text-emphasis-color | textEmphasisColor | |||||||||||||||||
| scrollSnapStop | scrollSnapStop | text-emphasis-position | textEmphasisPosition | |||||||||||||||||
| scrollSnapType | scrollSnapType | text-emphasis-style | textEmphasisStyle | |||||||||||||||||
| scrollTimeline | text-indent | textIndent | ||||||||||||||||||
| scrollTimelineAxis | text-justify | textJustify | ||||||||||||||||||
| scrollTimelineName | text-orientation | textOrientation | ||||||||||||||||||
| setProperty | text-overflow | textOverflow | ||||||||||||||||||
| shapeImageThreshold | shapeImageThreshold | text-rendering | textRendering | |||||||||||||||||
| shapeMargin | shapeMargin | text-shadow | textShadow | |||||||||||||||||
| shapeOutside | shapeOutside | text-transform | textTransform | |||||||||||||||||
| shapeRendering | shapeRendering | text-underline-offset | textUnderlineOffset | |||||||||||||||||
| size | text-underline-position | textUnderlinePosition | ||||||||||||||||||
| sizeAdjust | top | |||||||||||||||||||
| speak | touch-action | touchAction | ||||||||||||||||||
| speakAs | transform | |||||||||||||||||||
| stopColor | stopColor | transform-box | transformBox | |||||||||||||||||
| stopOpacity | stopOpacity | transform-origin | transformOrigin | |||||||||||||||||
| stroke | stroke | transform-style | transformStyle | |||||||||||||||||
| strokeDasharray | strokeDasharray | transition | ||||||||||||||||||
| strokeDashoffset | strokeDashoffset | transition-delay | transitionDelay | |||||||||||||||||
| strokeLinecap | strokeLinecap | transition-duration | transitionDuration | |||||||||||||||||
| strokeLinejoin | strokeLinejoin | transition-property | transitionProperty | |||||||||||||||||
| strokeMiterlimit | strokeMiterlimit | transition-timing-function | transitionTimingFunction | |||||||||||||||||
| strokeOpacity | strokeOpacity | translate | ||||||||||||||||||
| strokeWidth | strokeWidth | unicode-bidi | unicodeBidi | |||||||||||||||||
| suffix | user-select | userSelect | ||||||||||||||||||
| symbols | vector-effect | vectorEffect | ||||||||||||||||||
| syntax | vertical-align | verticalAlign | ||||||||||||||||||
| system | visibility | |||||||||||||||||||
| tableLayout | tableLayout | white-space | whiteSpace | |||||||||||||||||
| tabSize | tabSize | width | ||||||||||||||||||
| textAlign | textAlign | will-change | willChange | |||||||||||||||||
| textAlignLast | textAlignLast | word-break | wordBreak | |||||||||||||||||
| textAnchor | textAnchor | word-spacing | wordSpacing | |||||||||||||||||
| textCombineUpright | textCombineUpright | word-wrap | wordWrap | |||||||||||||||||
| textDecoration | textDecoration | writing-mode | writingMode | |||||||||||||||||
| textDecorationColor | textDecorationColor | x | ||||||||||||||||||
| textDecorationLine | textDecorationLine | y | ||||||||||||||||||
| textDecorationSkipInk | textDecorationSkipInk | z-index | zIndex | |||||||||||||||||
| textDecorationStyle | textDecorationStyle | |||||||||||||||||||
| textDecorationThickness | textDecorationThickness | |||||||||||||||||||
| textEmphasis | textEmphasis | |||||||||||||||||||
| textEmphasisColor | textEmphasisColor | |||||||||||||||||||
| textEmphasisPosition | textEmphasisPosition | |||||||||||||||||||
| textEmphasisStyle | textEmphasisStyle | |||||||||||||||||||
| textIndent | textIndent | |||||||||||||||||||
| textJustify | ||||||||||||||||||||
| textOrientation | textOrientation | |||||||||||||||||||
| textOverflow | textOverflow | |||||||||||||||||||
| textRendering | textRendering | |||||||||||||||||||
| textShadow | textShadow | |||||||||||||||||||
| textSizeAdjust | ||||||||||||||||||||
| textTransform | textTransform | |||||||||||||||||||
| textUnderlineOffset | textUnderlineOffset | |||||||||||||||||||
| textUnderlinePosition | textUnderlinePosition | |||||||||||||||||||
| textWrap | ||||||||||||||||||||
| timelineScope | ||||||||||||||||||||
| top | top | |||||||||||||||||||
| touchAction | touchAction | |||||||||||||||||||
| transform | transform | |||||||||||||||||||
| transformBox | transformBox | |||||||||||||||||||
| transformOrigin | transformOrigin | |||||||||||||||||||
| transformStyle | transformStyle | |||||||||||||||||||
| transition | transition | |||||||||||||||||||
| transitionDelay | transitionDelay | |||||||||||||||||||
| transitionDuration | transitionDuration | |||||||||||||||||||
| transitionProperty | transitionProperty | |||||||||||||||||||
| transitionTimingFunction | transitionTimingFunction | |||||||||||||||||||
| translate | translate | |||||||||||||||||||
| unicodeBidi | unicodeBidi | |||||||||||||||||||
| unicodeRange | ||||||||||||||||||||
| userSelect | userSelect | |||||||||||||||||||
| vectorEffect | vectorEffect | |||||||||||||||||||
| verticalAlign | verticalAlign | |||||||||||||||||||
| visibility | visibility | |||||||||||||||||||
| whiteSpace | whiteSpace | |||||||||||||||||||
| whiteSpaceCollapse | ||||||||||||||||||||
| width | width | |||||||||||||||||||
| willChange | willChange | |||||||||||||||||||
| wordBreak | wordBreak | |||||||||||||||||||
| wordSpacing | wordSpacing | |||||||||||||||||||
| wordWrap | wordWrap | |||||||||||||||||||
| writingMode | writingMode | |||||||||||||||||||
| x | x | |||||||||||||||||||
| y | y | |||||||||||||||||||
| zIndex | zIndex | |||||||||||||||||||
| zoom | ||||||||||||||||||||
| class Prop | |||||||||||||
| name | type | description | PBase | Prop & Bute | Prop | Bute | |||||||
| Public | #getNumbers | units(f) | isProp | isBute | |||||||||
| properties | getNumbers | count(f) | isAttribute | ||||||||||
| name | required(f) | ||||||||||||
| isPBase | cut() | ||||||||||||
| .units | string | lets the DOM deal with bad units values | #separator | getOne() | |||||||||
| getters and setters | _seps() | ||||||||||||
| join() | |||||||||||||
| _mask() | |||||||||||||
| _maskAll() | |||||||||||||
| this.required = this.cut | |||||||||||||
| get() | |||||||||||||
| getMany() | |||||||||||||
| static _get1() | |||||||||||||
| computed() | |||||||||||||
| parse() | |||||||||||||
| methods | getn() units arg, and related functions too | ||||||||||||
| only used for Hue in HSL/HWB, should be for lch/oklch too | |||||||||||||
| any other use for it? | |||||||||||||
| #a2N(), _2Num(), toNumby() | |||||||||||||
| .unitz() | string | pseudo-getter that prefers this.func.units | |||||||||||
| "Protected" | |||||||||||||
| Private properties | |||||||||||||
| instance | |||||||||||||
| static | |||||||||||||
| EFactory | o, as in: EFactorycreate(o) | implied classes | Easer sub-classes: | compute(): | factor | * | ease value | + | addend | o.values | factor | addend | a/f) wins! It means all famm arg arrays are effectively dense | |||||||||||||||||||||||||||||||||||||||||||||
| name | description | module | name | type | description | name | type | description | 2D array configuration | class Ease1: raw e.value applied to 1-arg prop|func across elements | multiply(): | factor | * | ease value | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | 1 | 2 | 0 | 1 | 2 | sparse arrays only legit as mask, and probably rarely used that way | ||||||||||||||||||||||||||||||
| Exported method | user-defined properties | cfg object: sub-element of o.config | er.value | [elm][arg] | dense | add(): | ease value | + | addend | obj.b.true: | func( | , | , | ) | 99 | 97 | 99 | 97 | current values are complete, must be densified, or vice-versa | |||||||||||||||||||||||||||||||||||||||
| create() | sub-class of EBase: Easer*, MEaser* | efactory.js | prop | Prop | required | param | number, array, null => cv | 0|1|2D sparse | o.cv | [elm][arg] | densy | no func, >1 args || 1 func, 1+ args | obj.b.false: | 0 | 2 | 99 | 1 | 97 | 99 | 0 | 97 | if (!mask) | ||||||||||||||||||||||||||||||||||||
| Internally exported methods, by module (imported by efactory.js) | elms | string, Element, collection, Elm, Elms | required | calc | function | cfg.param | any | sparse | class Ease1: raw e.value applied to 1-arg prop|func across elements | factor passed as argument when creating Easee | >1 func | obj.values[j]: | 1 | a) | use factor/addend arrays: must be dense | |||||||||||||||||||||||||||||||||||||||||||
| getCV() | gets element current values from DOM or user | cv.js | func | Func | default: prop.func | dim | int: 0-2 | if (2D): | [elm][arg] | class Ease1ByElm: ditto with max and/or min values by element | setting it to zero = 0 + addend, which is user error | byElm | cv[i]: | N | N | upDimensioning at runtime… | assumes contiguous args starting from 0 | |||||||||||||||||||||||||||||||||||||||||
| parseUn() | parses current values for "unstructured" | units | string, array, undefined | default: prop.unitz() | hasCV | bool, undefined | zEr.config() converts | class EaseN: raw e.value applied to masked args across elements | asPlug(): | 0px | 1px | 2px | each computer with array of .true | ignores empty slots for purposes of mask | ||||||||||||||||||||||||||||||||||||||||||||
| current() | parses current values for not "unstructured" | multiFunc | array: [mini-o] | byElm | bool, undefined | is 1D && byElm? | er.twoD, calc.twoD: | class EaseNByElm: ditto with max and/or min values by element | addend passed as argument when creating Easee | funcs | args | byElm | true: | func( | px, | , | px) | order config.fa by dims to optimize running #cvDims? | b) | a) or empty slots will be hard plugged | ||||||||||||||||||||||||||||||||||||||
| color() | colors need special treatment, plus Color.js | color.js | mask | bitmask, array (dense|sparse) | byArg | bool, undefined | overlaps .byElm | simple | path for 1D to 2D | class EaseValue: 1 calculated value across elements | 3D: | >1 | >1 | TRUE | 1 | 5 | 2D: b.true = all indexes for e) longest or f) first factor/addend array | |||||||||||||||||||||||||||||||||||||||||
| getFunc() | gets the Func instance or defers to Color.js | urcfa.js | start | alias for .addend | if (Is.def(end)) defaults to 0 | bAbE | bool, undefined | is 2D && bAbE? | multi | [arg][elm] | dense | class EaseByElm: >1 values calculated by element | true: | func( | N | px,1px, | N | px) | 0 | 1 | 2 | 3 | yuck | c) | longest factor/addend array = mask | |||||||||||||||||||||||||||||||||
| urcfa() | units, required, count, factor, addend | end | .factor as end not distance | see EFactory.#endToDist() | calc object: sub-element of ocalcs and Calc | zEr.calc() allocates | class EaseArray: >1 calculated values by arg across elements | if (Is.def(factor) && Is.def(addend)) compute*() | 2D: | >1 | >1 | FALSE | 1 | 3 | 1 | 3 | too complex | d) | factor/addend arrays are combed for a combined mask | |||||||||||||||||||||||||||||||||||||||
| optional() | reduces arg count in case of optional args | flip | bool | untouched by EFactory, see EBase | calc | function | zCalc calls c12s() | class EaseArrayByElm: 2D array of values [element][values/plugs] | if (Is.def(factor) && !Is.def(addend)) multiply*() | >1 | 1 | TRUE | 0 | 1 | 2 | plug | Q: | How does it affect o.set? When to cv plug? | ||||||||||||||||||||||||||||||||||||||||
| config() | builds o.config[factor, addend, max, min] | config.js | useUnit | bool | ditto | cNN | string => function | path for 1D to 2D | If (!Is.def(factor) && Is.def(addend)) add*() | 1|0 | >1 | TRUE | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 1 | plug | A: | o.set defaults to E.let. If you want to overwrite, set o.set:E.set | |||||||||||||||||||||||||||||||||||
| mask() | creates/validates o.mask | mask.js | set | char: E.set | E.net | param | number, array | 0|1|2D sparse | 1D | [arg] | sparse | obj.b.true: | func( | , | , | ) | if no unmasked cv args, then it doesn't matter anyway | ||||||||||||||||||||||||||||||||||||||||||
| maskCV() | gets cv for config masked arguments | maskCV.js | eval | function | user evaluate function | noop | 1|2D array: [Number] | outer dim sparse | 2D | [arg][elm] | dense | Measer: multi-ease set of easers | 1D: | >1 | 1 | FALSE | obj.b.false: | 1 | if (o.c) | I can see allowing for sparse mask, if you have one already made | ||||||||||||||||||||||||||||||||||||||
| endToDist() | converts end to distance | endToDist.js | byElm | defined or not, value ignored | converted to boolean: true|undefined | 1D | [elm] | sparse | each Easy can be used by any Measer | 1|0 | >1 | FALSE | obj.values[j]: | 0 | 2 | can't have null in 1D byElm array | It doesn't make sense to make one up, what are non-empty values? | |||||||||||||||||||||||||||||||||||||||||
| plugCV() | plugs o.value with current values by elm | plugCV.js | bAbE | no value: like HTML disabled | ditto, by Arg by Elm | 2D | [elm][arg] | dense | each Easy might have targets or not | if (factor === null) use current values | 1|0 | 1 | TRUE | cv[i]: | N | can only 1D byElm to 2D if other fa 2D | Anything but undefined | |||||||||||||||||||||||||||||||||||||||||
| calcEaser() | instantiates an Easer | calcs.js | easies | array: [Easy] | optional, array in mask order | or with c12s() swapping: | Measer doesn't extend Easer it has a single (T|G)Easer as .target | if (addend === null) use current values | asPlug(): | 0px | 1px | 2px | need to check for that and error? | Q: | Do factor/addend arrays have to match? Or use longest? | |||||||||||||||||||||||||||||||||||||||||||
| calcMEaser() | instantiates a MEaser | peri | callback | runs every frame | 1D | [elm] | sparse | Measers cannot loop by element, at least not yet | 0D: | 1|0 | 1 | FALSE | true: | func( | , | px, | ) | A: | good question, determining longest isn't much extra work. | |||||||||||||||||||||||||||||||||||||||
| calcByElm() | instantiates an EaserByElm or MEaserByElm | factor | number, array, E.currentValue | the o.config family of properties: | 2D | [arg][elm] | dense | max and min plug trues with hard values for args and elms | 3 | if (!o.c) | ||||||||||||||||||||||||||||||||||||||||||||||||
| calcNoElms() | instantiates a MEaser for pseudo animation | addend | number, array, E.currentValue | converted to cfg.param | easy.targets = [(t|g)easer] | they never represent an argument mask | true: | func(0px, | N | px,2px) | isSame = .every() | drawback of calc all then apply all is backloading apply | ||||||||||||||||||||||||||||||||||||||||||||||
| max | number, array, E.currentValue | linked to other properties in cfg | pre-spread, if no dim swap | easy.measers = [measer] | factor and addend plug trues with 1|0 and falses with current values | 1 | else | but overall this method performs better | ||||||||||||||||||||||||||||||||||||||||||||||||||
| min | number, array, E.currentValue | c02: pre-fill twoD with oneD | measer.easies = Map(Easy, [trueIndex]) | [func][elm][arg] | isSame by arg across elms | |||||||||||||||||||||||||||||||||||||||||||||||||||||
| internal properties | c12: ditto | or | measer.easies = sparse array [easy, ,easy] | for each [elm][arg] | 0 | 1 | 2 | 3 | 4 | 5 | null args transposed by .true | |||||||||||||||||||||||||||||||||||||||||||||||
| f | cfg, undefined | .factor, defaults to unused | measer.target = (t|g)easer | max, min, factor addend | for each [arg] | obj.b.true: | , | , | apply() | |||||||||||||||||||||||||||||||||||||||||||||||||
| a | cfg, undefined | .addend, ditto | class Easies { | If (1 elm) | obj.b.false: | 0 | 2 | 0 | if (o.b.true.length == 1 && isSame) | single value | ||||||||||||||||||||||||||||||||||||||||||||||||
| c | int : 0+, null | argument count | this.easies = []; | If (!count) | obj.values[j]: | 1 | no change | spread it across .true, join it, set it across elms | ||||||||||||||||||||||||||||||||||||||||||||||||||
| r | int : 1+ | required arg count | this.measers = Set(measers) | single value | cv[i]: | N | N | if (o.b.true.length == 1 && !isSame) | 1D array of values | |||||||||||||||||||||||||||||||||||||||||||||||||
| u | string, array, undefined | .units, defaults to prop|func.units | this.easeEm() | else | sparsify | asPlug(): | 0px | 1px | 2px | 1D o.bElm | spread it by .true, join it, set it across elms | |||||||||||||||||||||||||||||||||||||||||||||||
| isTo | bool | end not distance | single value + mask | yes | f | a | min | max | true: | px, | , | px | if (o.b.true.length > 1 && isSame) | 1D single value by elm | ||||||||||||||||||||||||||||||||||||||||||||
| l | int : o.elms.length | number of elements | call bool() post optional()? | Teaser: user needs a way to specify that mask/args should be processed as Geaser | array by arg + mask | yes | #cvDims() | x | x | x | x | 0 | 4 | 1D | spread it across .true by elm, join it by elm, set it by elm | |||||||||||||||||||||||||||||||||||||||||||
| lm | int : o.mask.length | number of masked arguments | would save trimming arrays | User or code might want a way to force Easer if only one func (cv one func too if let()) | array by arg, optionally sparse | #cvFill() | true: | N | px,2px | N | px | if (o.b.true.length > 1 && !isSame) | 1D array of values by elm | |||||||||||||||||||||||||||||||||||||||||||||
| lz | int : o.easies.length | number of easies for Measer* | review o.set == E.set | else | or #fill() | x | x | x | x | 0 | 2 | 2D | spread it by .true by elm, join it by elm, set it by elm | |||||||||||||||||||||||||||||||||||||||||||||
| cv | array: [[String]], byElmByArg | parsed DOM current values | means no cv plug, right? | No function, single arg = no array.join() | spread to elms | If (!count) | faDims is the wrinkle | compute() | ||||||||||||||||||||||||||||||||||||||||||||||||||
| cvRaw | array: [String], byElm | raw current values† | E.net requires .true mask | 1D array by elm = no array.join() | yes | single value | yes | faCV == 2 makes little sense to me | 0 | 1 | 2 | 3 | 4 | max | 00 | 01 | 02 | 11 | 12 | 22 | 9 funcs for [add, multiply, compute] * [value, 1D, 2D] | |||||||||||||||||||||||||||||||||||||
| seps | prop.getUn() properties: | any function or >1 args = array.join("") | array by element, optionally sparse | mmCV == 2 && dmax = 0 is user error | obj.b.true: | , | , | min | 00 | 01 | 02 | 11 | 12 | 22 | factor or addend spread to fill arrays to match more dims | |||||||||||||||||||||||||||||||||||||||||||
| lens | multi-function has extra parsing | else | mmCV == 2 && dmax > 0 will be rare | obj.b.false: | 1 | maxMin | 00 | 01 | 02 | 11 | 12 | 22 | max & min = 12 or 18 funcs, spread depends on that | |||||||||||||||||||||||||||||||||||||||||||||
| numBeg | #legText() might be excessive | Geaser is a whole other type of parsing | yes | single value + mask | yes | obj.values[j]: | 0 | 2 | result is value, 1D, or 2D | |||||||||||||||||||||||||||||||||||||||||||||||||
| numEnd | array: [int] | should maybe be eliminated | if [mask] and not multi-function, it's Geaser style | yes | array by arg + mask | yes | config.fa.dims: config.fa.forEach(#cvDims) | cv[i]: | N | 1 | if (o.byElm) | 1D is by arg or by elm, compute doesn't care | ||||||||||||||||||||||||||||||||||||||||||||||
| config | array: [cfg], famm order | all cfgs, dense |
|
if [func][mask] for multi-func, then Geaser style | yes | 1D array by arg | #[cv]fill() | asPlug(): | 0px | 1px | 2px | no change | ||||||||||||||||||||||||||||||||||||||||||||||
| configCV | array: [cfg], famm order | cfgs that use E.currentValue, dense | raf | need for a "preserveUnits" arg to use cv units | 1D array by elm + mask | yes | config.max: #cvDims(config.fa.dims) | true: | , | px, | if (b.true.length == 1) | |||||||||||||||||||||||||||||||||||||||||||||||
| dims | array: [int 0-2] | each cfg.dim in famm order | apps | unused Easy properties: | 2D array | config.min: #cvDims(config.fa.dims) | 3 | no change, but transpose by .true | ||||||||||||||||||||||||||||||||||||||||||||||||||
| dmax | int : 0-2 | max dimensionality of cfgs | easings | .wait | recycle/easeSteps | 2D array + mask | yes | true: | 0px, | N | px,2px | if (isSame) | ||||||||||||||||||||||||||||||||||||||||||||||
| dmin | int : 0-2 | min dimensionality of cfgs | multi | .time | 1 | no change | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| value | array: [[String]], byElmByArg | color | .type | if (!isSame) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| oneD | array: [Number] or [[Number]] | for o.calcByElm | docs | .start | 2D | |||||||||||||||||||||||||||||||||||||||||||||||||||||
| twoD | array: [[Number]] | src | .end | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| l1 | int : 1+ | o.twoD inner dimension length | prop | .dist | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| l2 | int : 1+ | o.twoD outer dimension length | easy | .io | unused by leg too | |||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcs | array: [calc] | array of calc objects for #calc*() | efactory | except in #reverseLeg | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcByElm | bool | set in #calcByElm() read in EBase | easer | unused leg properties | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| loopByElm | bool | linked to parent easy.#loopByElm | alt | .waits | steps only | |||||||||||||||||||||||||||||||||||||||||||||||||||||
| ezToMask | Map(Easy, [int 0-N, dense]) | index into o.mask, not arg indexes | .timing | ditto | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| bySame | bool | see EFactory.#bySame() | .easy | ditto | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| oneArg | bool | see EFactory.#maskCV() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| hasEasies | bool | efactory | x = don't export | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| alt user property names | efactory.js | create() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| elms | .elm, .element, .elements | cv.js | getCV() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| easies | .easy (for multiFunc sub-objects only) | parseUn() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| eval | .evaluator | current() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| byElm | .byElement | validCount() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typeError() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| bAbE | .byArgByElm | color.js | color() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| factor | .end, .dist, .distance | cjsTo() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| addend | .start | isCjs() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| multiFunc sub-object additional properties | isCjsSpace() | x | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| isMultiFunc | bool | urcfa.js | getFunc() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| bySameByArg | bool | urcfa() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| footnotes | optional() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| † created but currently unused | fa() | x | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| faToNumber() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| cNoTime | 3 | config.js | config() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fpl60hz | 50.0000 | paramLength() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| leftover | 99 | mask.js | mask() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| leftover / fpl60hz | 1.98 | maskCV.js | maskCV() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 16.3333 | mapMask() | x | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| isSameByArg() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| isSameByElm() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| allMustHaveValues() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| mustHaveValues() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| mustBeNumber() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| minArgs() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| endToDist.js | endToDist() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| toDistMap() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| toDistVal() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| toDistDefZero() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| defaultToZero() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| zeroToUndefined() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spliceMask() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| plugCV.js | plugCV() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcs.js | calcEaser() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcMEaser() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcByElm() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcNoElms() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| init_calc() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| calcNoDims() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| prepCalc() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| setCalc() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| noop1D() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| noop2D() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| meNoop1D() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| meNoop2D() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| meParam() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| swapDims() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| upDim() | x | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| cfg.param is created and used by Efactory | ||||||||||||||||||||||||||||||||||||||||||||
| mixing bEbA with bAbE is unlikely, and avoidable via Ez.swapDims(), thus unsupported | Calc.#twoD defaults to bAbE because that's the way multiFunc/Ease requires it | |||||||||||||||||||||||||||||||||||||||||||
| bEbA | twoD = bAbE | these examples use factor, even if it's not possible to do so in reality | ||||||||||||||||||||||||||||||||||||||||||
| bEbA | elm0 | elm1 | elm2 | calc | param | cNN | calc | param | cNN | var | dim++ | .noop | factor is always first, so always c0N, but * is best as example | |||||||||||||||||||||||||||||||
| c12() | 0 | 1 | 2 | 0 | 1 | 2 | 0 | 1 | 2 | 0 | 0 | c00 | 0 | 0 | c00 | value | c01s | |||||||||||||||||||||||||||
| c12s() | 7 | 7 | 7 | 8 | 8 | 8 | 9 | 9 | 9 | 0 | byArg | c01 | 0 | byArg | c01s | twoD | 2 | x | thisVal | 2 | ||||||||||||||||||||||||
| byArg | byArg | c11 | 0 | byElm | c01 | oneD | 1 | x | byArg | 1 | 2 | 3 | ||||||||||||||||||||||||||||||||
| c12() | byArg | 0 | 1 | 2 | 0 | bAbE | c02 | twoD | 2 | x | twoD | arg0 | arg1 | arg2 | ||||||||||||||||||||||||||||||
| c12s() | byElm | 7 | 8 | 9 | 0 | bEbA | c02s | twoD | 2 | x | 2 | 2 | 2 | 4 | 4 | 4 | 6 | 6 | 6 | |||||||||||||||||||||||||
| byElm | 0 | c10 | oneD | c02s | ||||||||||||||||||||||||||||||||||||||||
| bAbE | arg0 | arg1 | arg2 | byElm | byArg | c11s | twoD | 1 | x | thisVal | 2 | |||||||||||||||||||||||||||||||||
| c12() | 7 | 8 | 9 | 7 | 8 | 9 | 7 | 8 | 9 | byElm | byElm | c11 | oneD | bEbA | elm0 | elm1 | ||||||||||||||||||||||||||||
| c12s() | 0 | 0 | 0 | 1 | 1 | 1 | 2 | 2 | 2 | byElm | bAbE | c12 | twoD | 1 | x | 1 | 2 | 3 | 4 | 5 | 6 | |||||||||||||||||||||||
| byElm | bEbA | c12s | twoD | 1 | x | twoD | arg0 | arg1 | arg2 | |||||||||||||||||||||||||||||||||||
| c12() | byElm | 7 | 8 | 9 | bAbE | 0 | c20 | twoD | [a][e] | 2 | 8 | 4 | 10 | 6 | 12 | |||||||||||||||||||||||||||||
| c12s() | byArg | 0 | 1 | 2 | bAbE | byArg | c21s | twoD | c11s | |||||||||||||||||||||||||||||||||||
| bAbE | byElm | c21 | twoD | oneD | 1 | 2 | 3 | (byElm) | ||||||||||||||||||||||||||||||||||||
| bAbE | bAbE | c22 | twoD | byArg | 4 | u | 5 | |||||||||||||||||||||||||||||||||||||
| oneD | func0 | func1 | func2 | bAbE | bEbA | c22s | twoD | twoD | arg0 | arg1 | arg2 | |||||||||||||||||||||||||||||||||
| param | 0 | _ | 2 | _ | 1 | 0 | 1 | _ | [a][e] | 4 | 8 | 12 | 1 | 2 | 3 | 5 | 10 | 15 | ||||||||||||||||||||||||||
| offset | 0 | _ | 2 | _ | 4 | 5 | 6 | _ | current value dim++ | c12s | c12 | |||||||||||||||||||||||||||||||||
| noop | 1 | 3 | 7 | E.cV | args | elms | dims | type | oneD | 1 | 2 | 3 | (byElm) | oneD | 1 | 2 | 3 | (byElm) | ||||||||||||||||||||||||||
| 0 | 1 | 1 | 0 | 0 | bEbA | elm0 | elm1 | elm2 | bAbE | arg0 | arg1 | arg2 | ||||||||||||||||||||||||||||||||
| twoD | func0 | func1 | func2 | 0 | N | 1 | 1 | byArg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ||||||||||||||||||
| param | 0 | _ | 2 | _ | 1 | 0 | 1 | _ | 0 | N | N | 2 | bEbA | twoD | arg0 | arg1 | arg2 | twoD | arg0 | arg1 | arg2 | |||||||||||||||||||||||
| offset | 0 | _ | 2 | _ | 4 | 5 | 6 | _ | byArg | N | 1 | 1 | byArg | [a][e] | 1 | 8 | 21 | 2 | 10 | 24 | 3 | 12 | 27 | [a][e] | 1 | 4 | 9 | 4 | 10 | 18 | 7 | 16 | 27 | |||||||||||
| noop0 | _ | x | byArg | N | N | 2 | bEbA | c21s | c21 | |||||||||||||||||||||||||||||||||||
| noop1 | _ | _ | _ | x | byElm | 1 | N | 1 | byElm | twoD | arg0 | arg1 | arg2 | twoD | arg0 | arg1 | arg2 | |||||||||||||||||||||||||||
| noop2 | _ | _ | _ | _ | _ | _ | _ | x | byElm | N | N | 2 | bEbA | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | |||||||||||||
| bEbA | N | N | 2 | bEbA | byArg | 1 | 2 | 3 | byElm | 1 | 2 | 3 | ||||||||||||||||||||||||||||||||
| bAbE | N | N | 2 | bAbE | twoD | arg0 | arg1 | arg2 | twoD | arg0 | arg1 | arg2 | ||||||||||||||||||||||||||||||||
| start|addend:E.cV makes the most sense, start at current value | [a][e] | 1 | 2 | 3 | 8 | 10 | 12 | 21 | 24 | 27 | [a][e] | 1 | 4 | 9 | 4 | 10 | 18 | 7 | 16 | 27 | ||||||||||||||||||||||||
| factor:E.cV & addend:E.cV is plausible | c22s | |||||||||||||||||||||||||||||||||||||||||||
| for example: increase values by 50% with easy={start:0, end:0.5} | twoD | arg0 | arg1 | arg2 | ||||||||||||||||||||||||||||||||||||||||
| end:cV makes no sense if easy.end == 1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | |||||||||||||||||||||||||||||||||||
| I can see max or min:E.cV to delay starting or stop during | bEbA | elm0 | elm1 | elm2 | ||||||||||||||||||||||||||||||||||||||||
| both max and min with cv only makes if selectively applied by arg or elm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | |||||||||||||||||||||||||||||||||||
| factor/addend and max/min with cv makes no sense | twoD | arg0 | arg1 | arg2 | ||||||||||||||||||||||||||||||||||||||||
| no way to cross the max/min threshold when you start or end there | [a][e] | 1 | 8 | 21 | 8 | 25 | 48 | 21 | 42 | 81 | ||||||||||||||||||||||||||||||||||
| maybe factor, but only as distance, and even then that's pretty weird | ||||||||||||||||||||||||||||||||||||||||||||
| start | [byArg] | ditto | index | 0 | 1 | 2 | 3 | 4 | 5 | 6 | ||||||||||||||||||||||||||||||||||
| end | E.cV = | [2 x [byArg]] | [byArg] | param | a | b | c | d | ||||||||||||||||||||||||||||||||||||
| elms | 2 x cssRule | 2 x <input> | range | 2 | 3 | 4 | 5 | |||||||||||||||||||||||||||||||||||||
| i++ | N | N | Y | Y | ||||||||||||||||||||||||||||||||||||||||
| del idx | Y | Y | N | N | ||||||||||||||||||||||||||||||||||||||||
| param | a | b | c | d | ||||||||||||||||||||||||||||||||||||||||
| Dimensionalities for each cfg.param in Efactory | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Actual matrix of array types: mixing bEbA with bAbE is unlikely, and avoidable via Ez.swapDims(), thus unsupported | Non-MultiFunc/Ease, Non-LoopByElm | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 0 | byArg | byElm | bEbA | bAbE | total | dimensionality | dims | twoD | calc | dimensions | twoD | calcs | pre-conversions | dimensions | twoD | calcs | pre-conversions | ||||||||||||||||||||||||||||||||||||||
| x | x1 | 5 | same | up | down | mix | 0 | bEbA | c00() | noop() | 0 | byArg | byElm | bAbE | c00() | c01() | c12s() | byElm -> bAbE | 0 | byArg | byElm | bEbA | bEbA | c00() | c01() | c12() | c22() | byElm -> bEbA | |||||||||||||||||||||||||||
| x | x2 | 18 | 2 | 8 | 8 | 0 | byArg | bEbA | c11() | 0 | byArg | bEbA | bEbA | c00() | c01() | c12() | 0 | byElm | byArg | bEbA | bEbA | c00() | c01() | c12s() | c22() | byArg -> bEbA | |||||||||||||||||||||||||||||
| x | x3 | 42 | 10 | 10 | 22 | byElm | bAbE | c11() | 0 | byArg | bAbE | bAbE | c00() | c01() | c12s() | 0 | byArg | bEbA | byElm | bEbA | c00() | c01() | c12() | c22() | byElm -> bEbA | ||||||||||||||||||||||||||||||
| x | x4 | 48 | 2 | 2 | 44 | bEbA | bEbA | c22() | 0 | byElm | bEbA | bEbA | c00() | c01() | c12s() | 0 | byElm | bEbA | byArg | bEbA | c00() | c01() | c12s() | c22() | byArg -> bEbA | ||||||||||||||||||||||||||||||
| x | 113 | 2 | 20 | 20 | 66 | bAbE | bAbE | c22() | 0 | byElm | bAbE | bAbE | c00() | c01() | c12() | 0 | bEbA | byArg | byElm | bEbA | c00() | c02() | c22() | c22() | byArg -> bEbA | byElm -> bEbA | |||||||||||||||||||||||||||||
| x | x | 0 | byArg | byArg | 0 | byArg | byElm | bEbA | bEbA | c01() | c12() | c22() | byElm -> bEbA | 0 | bEbA | byElm | byArg | bEbA | c00() | c02() | c22() | c22() | byElm -> bEbA | byArg -> bEbA | |||||||||||||||||||||||||||||||
| x | x | 0 | byElm | byElm | 0 | dimensions | twoD | calcs | pre-convert | byArg | byElm | bAbE | bAbE | c01() | c12s() | c22() | byElm -> bAbE | byArg | 0 | byElm | bEbA | bEbA | c01() | c11() | c12() | c22() | 0 -> byArg | byElm -> bEbA | |||||||||||||||||||||||||||
| x | x | 0 | bEbA | bEbA | 0 | 0 | byArg | bEbA | c00() | c01() | 0 | byElm | byArg | bEbA | c00() | c01() | c12s() | byArg -> bEbA | byArg | 0 | bEbA | byElm | bEbA | c01() | c11() | c12() | c22() | 0 -> byArg | byElm -> bEbA | ||||||||||||||||||||||||||
| x | 0 | bAbE | bAbE | 0 | 0 | byElm | bAbE | c00() | c01() | 0 | bEbA | byArg | bEbA | c00() | c02() | c22() | byArg -> bEbA | byArg | byElm | 0 | bEbA | bEbA | c01() | c12() | c22() | c22() | byElm -> bEbA | 0 -> bEbA | |||||||||||||||||||||||||||
| x | x | byArg | byElm | byElm | byArg | 0 | bEbA | bEbA | c00() | c02() | 0 | bAbE | byArg | bAbE | c00() | c02() | c22() | byArg -> bAbE | byArg | byElm | bEbA | 0 | bEbA | c01() | c12() | c22() | c22() | byElm -> bEbA | 0 -> bEbA | ||||||||||||||||||||||||||
| x | x | byArg | bEbA | bEbA | byArg | 0 | bAbE | bAbE | c00() | c02() | 0 | bEbA | byElm | bEbA | c00() | c02() | c22() | byElm -> bEbA | byArg | bEbA | 0 | byElm | bEbA | c01() | c12() | c22() | c22() | 0 -> bEbA | byElm -> bEbA | ||||||||||||||||||||||||||
| x | x | byArg | bAbE | bAbE | byArg | byArg | byElm | bAbE | c01() | c12s() | byElm -> bAbE | 0 | bAbE | byElm | bAbE | c00() | c02() | c22() | byElm -> bAbE | byArg | bEbA | byElm | 0 | bEbA | c01() | c12() | c22() | c22() | byElm -> bEbA | 0 -> bEbA | |||||||||||||||||||||||||
| x | x | byElm | bEbA | bEbA | byElm | byArg | bEbA | bEbA | c01() | c12() | byArg | bEbA | byElm | bEbA | c01() | c12() | c22() | byElm -> bEbA | byElm | byArg | 0 | bEbA | bEbA | c01() | c12s() | c22() | c22() | byArg -> bEbA | 0 -> bEbA | ||||||||||||||||||||||||||
| x | x | byElm | bAbE | bAbE | byElm | byArg | bAbE | bAbE | c01() | c12s() | byArg | bAbE | byElm | bAbE | c01() | c12s() | c22() | byElm -> bAbE | byElm | byArg | bEbA | 0 | bEbA | c01() | c12s() | c22() | c22() | byArg -> bEbA | 0 -> bEbA | ||||||||||||||||||||||||||
| x | x | x | 0 | byArg | byElm | 0 | byElm | byArg | byArg | 0 | byElm | byArg | byElm | 0 | byElm | 0 | byArg | byElm | byArg | 0 | byElm | bEbA | bEbA | c01() | c12s() | byArg | 0 | byElm | bAbE | c01() | c11() | c12s() | 0 -> byArg | byElm -> bAbE | byElm | 0 | byArg | bEbA | bEbA | c01() | c11() | c12s() | c22() | 0 -> byElm | byArg -> bEbA | ||||||||||
| x | x | x | 0 | byArg | bEbA | 0 | bEbA | byArg | byArg | 0 | bEbA | byArg | bEbA | 0 | bEbA | 0 | byArg | bEbA | byArg | 0 | byElm | bAbE | bAbE | c01() | c12() | byArg | 0 | bEbA | bEbA | c01() | c11() | c12() | 0 -> byArg | byElm | 0 | bEbA | byArg | bEbA | c01() | c11() | c12s() | c22() | 0 -> byElm | byArg -> bEbA | |||||||||||
| x | x | x | 0 | byArg | bAbE | 0 | bAbE | byArg | byArg | 0 | bAbE | byArg | bAbE | 0 | bAbE | 0 | byArg | bAbE | byArg | 0 | byArg | 0 | bEbA | c01() | c11() | 0 -> byArg | byArg | 0 | bAbE | bAbE | c01() | c11() | c12s() | 0 -> byArg | byElm | bEbA | byArg | 0 | bEbA | c01() | c12s() | c22() | c22() | byArg -> bEbA | 0 -> bEbA | ||||||||||
| x | x | x | 0 | byElm | bEbA | 0 | bEbA | byElm | byElm | 0 | bEbA | byElm | bEbA | 0 | bEbA | 0 | byElm | bEbA | byElm | 0 | byElm | 0 | bAbE | c01() | c11() | 0 -> byElm | byElm | 0 | bEbA | bEbA | c01() | c11() | c12s() | 0 -> byElm | byElm | bEbA | 0 | byArg | bEbA | c01() | c12s() | c22() | c22() | 0 -> bEbA | byArg -> bEbA | ||||||||||
| x | x | x | 0 | byElm | bAbE | 0 | bAbE | byElm | byElm | 0 | bAbE | byElm | bAbE | 0 | bAbE | 0 | byElm | bAbE | byElm | 0 | bEbA | 0 | bEbA | c02() | c22() | 0 -> bEbA | byElm | 0 | bAbE | bAbE | c01() | c11() | c12() | 0 -> byElm | bEbA | byArg | byElm | 0 | bEbA | c02() | c22() | c22() | c22() | byArg -> bEbA | byElm -> bEbA | 0 -> bEbA | |||||||||
| x | x | x | byArg | byElm | bEbA | byArg | bEbA | byElm | byElm | byArg | bEbA | byElm | bEbA | byArg | bEbA | byArg | byElm | bEbA | byElm | byArg | bAbE | 0 | bAbE | c02() | c22() | 0 -> bAbE | byElm | byArg | bEbA | bEbA | c01() | c12s() | c22() | byArg -> bEbA | bEbA | byArg | 0 | byElm | bEbA | c02() | c22() | c22() | c22() | byArg -> bEbA | 0 -> bEbA | byElm -> bEbA | |||||||||
| x | x | x | byArg | byElm | bAbE | byArg | bAbE | byElm | byElm | byArg | bAbE | byElm | bAbE | byArg | bAbE | byArg | byElm | bAbE | byElm | byArg | byElm | byArg | bEbA | c01() | c12s() | byArg -> bEbA | byElm | byArg | bAbE | bAbE | c01() | c12() | c22() | byArg -> bAbE | bEbA | byElm | byArg | 0 | bEbA | c02() | c22() | c22() | c22() | byElm -> bEbA | byArg -> bEbA | 0 -> bEbA | |||||||||
| x | x | x | x | 0 | byArg | byElm | bEbA | 0 | byArg | byElm | bAbE | bEbA | byArg | bEbA | c02() | c22() | byArg -> bEbA | byArg | byElm | 0 | bAbE | c01() | c12s() | c22() | byElm -> bAbE | 0 -> bAbE | bEbA | byElm | 0 | byArg | bEbA | c02() | c22() | c22() | c22() | byElm -> bEbA | 0 -> bEbA | byArg -> bEbA | |||||||||||||||||
| x | x | x | x | 0 | byElm | byArg | bEbA | 0 | byElm | byArg | bAbE | bAbE | byArg | bAbE | c02() | c22() | byArg -> bAbE | byArg | bEbA | 0 | bEbA | c01() | c12() | c22() | 0 -> bEbA | bEbA | 0 | byArg | byElm | bEbA | c02() | c22() | c22() | c22() | 0 -> bEbA | byArg -> bEbA | byElm -> bEbA | ||||||||||||||||||
| 0 | byArg | bEbA | byElm | 0 | byArg | bAbE | byElm | bEbA | byElm | bEbA | c02() | c22() | byElm -> bEbA | byArg | bAbE | 0 | bAbE | c01() | c12s() | c22() | 0 -> bAbE | bEbA | 0 | byElm | byArg | bEbA | c02() | c22() | c22() | c22() | 0 -> bEbA | byElm -> bEbA | byArg -> bEbA | ||||||||||||||||||||||
| 0 | byElm | bEbA | byArg | 0 | byElm | bAbE | byArg | bAbE | byElm | bAbE | c02() | c22() | byElm -> bAbE | byElm | bEbA | 0 | bEbA | c01() | c12s() | c22() | 0 -> bEbA | 0 | byArg | byElm | bAbE | bAbE | c00() | c01() | c12s() | c22() | byElm -> bAbE | ||||||||||||||||||||||||
| 0 | bEbA | byArg | byElm | 0 | bAbE | byArg | byElm | byElm | bAbE | 0 | bAbE | c01() | c12() | c22() | 0 -> bAbE | 0 | byElm | byArg | bAbE | bAbE | c00() | c01() | c12() | c22() | byArg -> bAbE | ||||||||||||||||||||||||||||||
| 0 | bEbA | byElm | byArg | 0 | bAbE | byElm | byArg | byElm | bEbA | byArg | bEbA | c01() | c12s() | c22() | byArg -> bEbA | 0 | byArg | bAbE | byElm | bAbE | c00() | c01() | c12s() | c22() | byElm -> bAbE | ||||||||||||||||||||||||||||||
| byArg | 0 | byElm | bEbA | byArg | 0 | byElm | bAbE | MultiFunc/Ease always uses bAbE | byElm | bAbE | byArg | bAbE | c01() | c12() | c22() | byArg -> bAbE | 0 | byElm | bAbE | byArg | bAbE | c00() | c01() | c12() | c22() | byArg -> bAbE | |||||||||||||||||||||||||||||
| byArg | 0 | bEbA | byElm | byArg | 0 | bAbE | byElm | LoopByElm is bEbA | byElm | 0 | byArg | bEbA | c01() | c11() | c12s() | 0 -> byElm | byArg -> bEbA | 0 | bAbE | byArg | byElm | bAbE | c00() | c02() | c22() | c22() | byArg -> bAbE | byElm -> bAbE | |||||||||||||||||||||||||||
| byArg | byElm | 0 | bEbA | byArg | byElm | 0 | bAbE | bEbA | 0 | byArg | bEbA | c02() | c22() | c22() | 0 -> bEbA | byArg -> bEbA | 0 | bAbE | byElm | byArg | bAbE | c00() | c02() | c22() | c22() | byElm -> bAbE | byArg -> bAbE | ||||||||||||||||||||||||||||
| byArg | byElm | bEbA | 0 | byArg | byElm | bAbE | 0 | bAbE | 0 | byArg | bAbE | c02() | c22() | c22() | 0 -> bAbE | byArg -> bAbE | byArg | 0 | byElm | bAbE | bAbE | c01() | c11() | c12s() | c22() | 0 -> byArg | byElm -> bAbE | ||||||||||||||||||||||||||||
| byArg | bEbA | 0 | byElm | byArg | bAbE | 0 | byElm | bEbA | 0 | byElm | bEbA | c02() | c22() | c22() | 0 -> bEbA | byElm -> bEbA | byArg | 0 | bAbE | byElm | bAbE | c01() | c11() | c12s() | c22() | 0 -> byArg | byArg -> bAbE | ||||||||||||||||||||||||||||
| byArg | bEbA | byElm | 0 | byArg | bAbE | byElm | 0 | bAbE | 0 | byElm | bAbE | c02() | c22() | c22() | 0 -> bAbE | byElm -> bAbE | byArg | byElm | 0 | bAbE | bAbE | c01() | c12s() | c22() | c22() | byElm -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||
| byElm | byArg | 0 | bEbA | byElm | byArg | 0 | bAbE | bEbA | byArg | byElm | bEbA | c02() | c22() | c22() | byArg -> bEbA | byElm -> bEbA | byArg | byElm | bAbE | 0 | bAbE | c01() | c12s() | c22() | c22() | byElm -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||
| byElm | byArg | bEbA | 0 | byElm | byArg | bAbE | 0 | bAbE | byArg | byElm | bAbE | c02() | c22() | c22() | byArg -> bAbE | byElm -> bAbE | byArg | bAbE | 0 | byElm | bAbE | c01() | c12s() | c22() | c22() | 0 -> bAbE | byElm -> bAbE | ||||||||||||||||||||||||||||
| byElm | 0 | byArg | bEbA | byElm | 0 | byArg | bAbE | byElm | byArg | 0 | bEbA | c01() | c12s() | c22() | byArg -> bEbA | 0 -> bEbA | byArg | bAbE | byElm | 0 | bAbE | c01() | c12s() | c22() | c22() | byElm -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||
| byElm | 0 | bEbA | byArg | byElm | 0 | bAbE | byArg | bEbA | byArg | 0 | bEbA | c02() | c22() | c22() | byArg -> bEbA | 0 -> bEbA | byElm | byArg | 0 | bAbE | bAbE | c01() | c12() | c22() | c22() | byArg -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||
| byElm | bEbA | byArg | 0 | byElm | bAbE | byArg | 0 | bAbE | byArg | 0 | bAbE | c02() | c22() | c22() | byArg -> bAbE | 0 -> bAbE | byElm | byArg | bAbE | 0 | bAbE | c01() | c12() | c22() | c22() | byArg -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||
| byElm | bEbA | 0 | byArg | byElm | bAbE | 0 | byArg | bEbA | byElm | 0 | bEbA | c02() | c22() | c22() | byElm -> bEbA | 0 -> bEbA | byElm | 0 | byArg | bAbE | bAbE | c01() | c11() | c12() | c22() | 0 -> byElm | byArg -> bAbE | ||||||||||||||||||||||||||||
| bEbA | byArg | byElm | 0 | bAbE | byArg | byElm | 0 | bAbE | byElm | 0 | bAbE | c02() | c22() | c22() | byElm -> bAbE | 0 -> bAbE | byElm | 0 | bAbE | byArg | bAbE | c01() | c11() | c12() | c22() | 0 -> byElm | byArg -> bAbE | ||||||||||||||||||||||||||||
| bEbA | byArg | 0 | byElm | bAbE | byArg | 0 | byElm | bEbA | byElm | byArg | bEbA | c02() | c22() | c22() | byElm -> bEbA | byArg -> bEbA | byElm | bAbE | byArg | 0 | bAbE | c01() | c12() | c22() | c22() | byArg -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||
| bEbA | byElm | byArg | 0 | bAbE | byElm | byArg | 0 | bAbE | byElm | byArg | bAbE | c02() | c22() | c22() | byElm -> bAbE | byArg -> bAbE | byElm | bAbE | 0 | byArg | bAbE | c01() | c12() | c22() | c22() | 0 -> bAbE | byArg -> bAbE | ||||||||||||||||||||||||||||
| bEbA | byElm | 0 | byArg | bAbE | byElm | 0 | byArg | bAbE | byArg | byElm | 0 | bAbE | c02() | c22() | c22() | c22() | byArg -> bAbE | byElm -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||||||||||
| bEbA | 0 | byArg | byElm | bAbE | 0 | byArg | byElm | bAbE | byArg | 0 | byElm | bAbE | c02() | c22() | c22() | c22() | byArg -> bAbE | 0 -> bAbE | byElm -> bAbE | ||||||||||||||||||||||||||||||||||||
| bEbA | 0 | byElm | byArg | bAbE | 0 | byElm | byArg | bAbE | byElm | byArg | 0 | bAbE | c02() | c22() | c22() | c22() | byElm -> bAbE | byArg -> bAbE | 0 -> bAbE | ||||||||||||||||||||||||||||||||||||
| bAbE | byElm | 0 | byArg | bAbE | c02() | c22() | c22() | c22() | byElm -> bAbE | 0 -> bAbE | byArg -> bAbE | ||||||||||||||||||||||||||||||||||||||||||||
| bAbE | 0 | byArg | byElm | bAbE | c02() | c22() | c22() | c22() | 0 -> bAbE | byArg -> bAbE | byElm -> bAbE | ||||||||||||||||||||||||||||||||||||||||||||
| bAbE | 0 | byElm | byArg | bAbE | c02() | c22() | c22() | c22() | 0 -> bAbE | byElm -> bAbE | byArg -> bAbE | ||||||||||||||||||||||||||||||||||||||||||||
| numBeg | numEnd | m0 | mL | Plug & Squeeze | see Efactory: plugCV() and parseUn() | |||||||||||||||||||||
| T | F | o.c | mask: | [0, | 2] | i | j | t | m | |||||||||||||||||
| FALSE | TRUE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 0 | 0 | 0 | |||||||||||||
| FALSE | TRUE | !nb | !ne | - | S | S | S | S | * | 2 | 1 | 2 | 1 | |||||||||||||
| FALSE | TRUE | !nb | !ne | N | V | N | V | 4 | 3 | 4 | 2 | |||||||||||||||
| TRUE | FALSE | nb | !ne | 4 | [0, | 1, | 2, | 3] | 1 | 1 | 2 | 1 | ||||||||||||||
| TRUE | FALSE | nb | !ne | - | - | S | S | S | S | 3 | 3 | 4 | 2 | |||||||||||||
| TRUE | FALSE | nb | !ne | N | V | N | V | - | - | - | - | |||||||||||||||
| FALSE | FALSE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 0 | 0 | 0 | |||||||||||||
| FALSE | FALSE | !nb | !ne | - | S | S | S | S | S | 2 | 1 | 2 | 1 | |||||||||||||
| FALSE | FALSE | !nb | !ne | N | V | N | V | 4 | 3 | 4 | 2 | |||||||||||||||
| TRUE | TRUE | nb | !ne | 4 | [0, | 1, | 2, | 3] | 1 | 1 | 2 | 1 | ||||||||||||||
| TRUE | TRUE | nb | !ne | - | - | S | S | S | * | 3 | 3 | 4 | 2 | |||||||||||||
| TRUE | TRUE | nb | !ne | N | V | N | V | - | - | - | - | |||||||||||||||
| T | T | o.c | mask: | [0, | 3] | i | j | t | m | |||||||||||||||||
| FALSE | TRUE | !nb | ne | 4 | [0, | 1, | 2, | 3] | 0 | 0 | 0 | 0 | ||||||||||||||
| FALSE | TRUE | !nb | ne | - | S | S | S | S | 2 | 1 | 3 | 1 | ||||||||||||||
| FALSE | TRUE | !nb | ne | N | V | V | N | - | - | - | - | |||||||||||||||
| TRUE | FALSE | nb | !ne | 4 | [0, | 1, | 2, | 3] | 1 | 1 | 3 | 1 | ||||||||||||||
| TRUE | FALSE | nb | !ne | - | - | S | S | S | S | 3 | 4 | 4 | 2 | |||||||||||||
| TRUE | FALSE | nb | !ne | N | V | V | N | - | - | - | - | |||||||||||||||
| FALSE | FALSE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 0 | 0 | 0 | |||||||||||||
| FALSE | FALSE | !nb | !ne | - | S | S | S | S | S | 2 | 1 | 3 | 1 | |||||||||||||
| FALSE | FALSE | !nb | !ne | N | V | V | N | 4 | 4 | 4 | 2 | |||||||||||||||
| TRUE | TRUE | nb | ne | 3 | [0, | 1, | 2] | 1 | 1 | 3 | 1 | ln = o.cv.nums.length = 4 | ||||||||||||||
| TRUE | TRUE | nb | ne | - | - | S | S | S | - | - | - | - | ||||||||||||||
| TRUE | TRUE | nb | ne | N | V | V | N | - | - | - | - | if (o.cv.numEnd && !ne) // 25% of the possible cases | ||||||||||||||
| o.cv.seps.forEach((arr) => { arr.push(""); }); | ||||||||||||||||||||||||||
| F | T | o.c | mask: | [1, | 3] | i | j | t | m | |||||||||||||||||
| FALSE | TRUE | !nb | ne | 4 | [0, | 1, | 2, | 3] | 0 | 0 | 1 | 0 | i = 0; | |||||||||||||
| FALSE | TRUE | !nb | ne | - | S | S | S | S | 2 | 2 | 3 | 1 | j = 0; | |||||||||||||
| FALSE | TRUE | !nb | ne | V | N | V | N | - | - | - | - | if (o.cv.numBeg) { | ||||||||||||||
| TRUE | FALSE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 1 | 1 | 0 | if (nb) | // if (m0) would be the same | |||||||||||
| TRUE | FALSE | !nb | !ne | - | - | S | S | S | S | 2 | 2 | 3 | 1 | i++; | ||||||||||||
| TRUE | FALSE | !nb | !ne | V | N | V | N | 4 | 4 | 4 | 2 | else | ||||||||||||||
| FALSE | FALSE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 0 | 1 | 0 | arr[i] = o.cv.vals[j]; | ||||||||||||
| FALSE | FALSE | !nb | !ne | - | S | S | S | S | S | 2 | 2 | 3 | 1 | j++; | ||||||||||||
| FALSE | FALSE | !nb | !ne | V | N | V | N | 4 | 4 | 4 | 2 | } | ||||||||||||||
| TRUE | TRUE | !nb | ne | 4 | [0, | 1, | 2, | 3] | 0 | 1 | 1 | 0 | for (m = i; i < o.c; i += 2, j++, m++) { | |||||||||||||
| TRUE | TRUE | !nb | ne | - | - | S | S | S | 2 | 2 | 3 | 1 | t = m < o.lt ? o.mask[m] : ln; | |||||||||||||
| TRUE | TRUE | !nb | ne | V | N | V | N | - | - | - | - | while (j < t) | ||||||||||||||
| arr[i] += o.cv.seps[j] + o.cv.vals[j++]; | ||||||||||||||||||||||||||
| F | F | o.c | mask: | [1, | 2] | i | j | t | m | arr[i] += o.cv.seps[j]; | ||||||||||||||||
| FALSE | TRUE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 0 | 1 | 0 | } | ||||||||||||
| FALSE | TRUE | !nb | !ne | - | S | S | S | S | * | 2 | 2 | 2 | 1 | |||||||||||||
| FALSE | TRUE | !nb | !ne | V | N | N | V | 4 | 3 | 4 | 2 | |||||||||||||||
| TRUE | FALSE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 1 | 1 | 0 | |||||||||||||
| TRUE | FALSE | !nb | !ne | - | - | S | S | S | S | 2 | 2 | 2 | 1 | |||||||||||||
| TRUE | FALSE | !nb | !ne | V | N | N | V | 4 | 3 | 4 | 2 | |||||||||||||||
| FALSE | FALSE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 0 | 1 | 0 | |||||||||||||
| FALSE | FALSE | !nb | !ne | - | S | S | S | S | S | 2 | 2 | 2 | 1 | |||||||||||||
| FALSE | FALSE | !nb | !ne | V | N | N | V | 4 | 3 | 4 | 2 | |||||||||||||||
| TRUE | TRUE | !nb | !ne | 5 | [0, | 1, | 2, | 3, | 4] | 0 | 1 | 1 | 0 | |||||||||||||
| TRUE | TRUE | !nb | !ne | - | - | S | S | S | * | 2 | 2 | 2 | 1 | |||||||||||||
| TRUE | TRUE | !nb | !ne | V | N | N | V | 4 | 3 | 4 | 2 | |||||||||||||||
| if (numbBeg) start with vals | else start with seps | |||||||||||||||||||||||||
| isep: | 0 | |||||||||||||||||||||||||
| ival: | 0 | ival: | 0 | |||||||||||||||||||||||
| isep: | 0 | iarr: | 0 | |||||||||||||||||||||||
| iarr: | nb ? 1 : 0 | imask: | 0 | |||||||||||||||||||||||
| imask: | nb ? 1 : 0 | |||||||||||||||||||||||||
| class EBase | Easer and MEaser classes | wait | pause | time | first | loop | 1st diff | remainder | Pseudo-Animation | ||||||||||
| name | type | description | name | type | description | 20 | 10 | 100 | 120 | 110 | 0 | -10 | Easies | easy._easeMe() only, no targets | |||||
| Public | class Easer | extends EBase | 15 | 20 | 80 | 95 | 100 | 25 | 5 | [M]Easer | #runPeri() - only matters if you have config:famm | ||||||||
| getters | apply() | undefined | public, called by Easy.prototype.easeMe() | 10 | 20 | 90 | 100 | 110 | 20 | 0 | e.g. multi-arg irrelevant if no famm or only 1 famm | ||||||||
| elmCount | int | read-only, number of elements | #calc | Calc | private, single instance of Calc | 10 | 120 | 1 | FALSE | should I remove duplicate famm by arg? Probably not | |||||||||
| isEaser | bool | read-only, always returns true | class EaserByElm | extends EBase | but famm args don't have to relate to prop args | ||||||||||||||
| methods | apply() | undefined | ditto | minimum object for create(object) is {peri:…} | |||||||||||||||
| evaluate() | e.value | #calcs | array: [Calc] | length = #cElms | if (maskCV or plugCV) needs elms or cV | ||||||||||||||
| set() | undefined | class EaserMulti | extends EBase | if (elms) it needs prop | |||||||||||||||
| setOneElm() | undefined | apply() | undefined | ditto | |||||||||||||||
| "Protected" property | #calcs | array: [Calc] | length = o.multiFunc.length | a) | what to apply to elm | ||||||||||||||
| _iElm() | int index | shared with ByElm sub-classes | class EaserMultiByElm | extends EBase | b) when and what to apply to 2nd elm | when to ++iElm | |||||||||||||
| Private | apply() | undefined | ditto | c) | what to apply to each elm if 2 | ||||||||||||||
| properties | #calcs | array: [[Calc]] | by element by f of multiFunc: [elm[f]] | ||||||||||||||||
| #calc | Calc | single instance of Calc | class MEBase | extends EBase | |||||||||||||||
| #cElms | int | element count | mevaluate() | array: [e.value] | wraps this.evaluate() byEasy | ||||||||||||||
| #elms | array: [Element] | .easies | Easies | read-only getter | Multi-Ease test page (test/multi.html): | getEasies() called by getName() and end of | |||||||||||||
| #flip | bool | #easies | Easies | private | virgin user: | loadCommon() or after presets have loaded. | |||||||||||||
| #mask | array: [int] | masked argument indexes into #value | .isMEaser | bool | read-only, always returns true | load presets | |||||||||||||
| #oneD | class MEaser | extends MEBase | load named easies | objFromCtrls() | |||||||||||||||
| #peri | user callback | runs once per set() or setOneElm() | apply() | undefined | public, called by Easies.prototype.easeEm() | 1st option selected by default | returns: | [{name:{easy}}, …] | |||||||||||
| #prop | #calcs | array: [Calc] | length = o.lz aka o.easies.length | display each easy's properties (all the same) | |||||||||||||||
| #twoD | class MEaserByElm | extends MEBase | return user: | 574 | |||||||||||||||
| #uEval | apply() | undefined | ditto | load named easies | 56 | ||||||||||||||
| #value | #calcs | array: [[Calc]] | by element by ez of #easies: [elm[ez]] | select most recent value for each easies <select> | 630 | ||||||||||||||
| instance methods | class MEaserMulti | extends MEBase | display current settings for each easy | ||||||||||||||||
| #evalBasic() | apply() | undefined | ditto | ||||||||||||||||
| #evalUnit() | #calcs | onchange: | |||||||||||||||||
| #evalUser() | class MEaserMultiByElm | extends MEBase | newEasies() | ||||||||||||||||
| #evalBoth() | apply() | undefined | ditto | reset each bar of polygon to start or end | |||||||||||||||
| #assign() | #calcs | localStorage.setItem() | |||||||||||||||||
| static methods | |||||||||||||||||||
| #assignByArgByElm() | static | Color properties/functions, Ez.toNumby(fromColor()), mask:[0,1,2] vs mask:[0,1,2,3]: | |||||||||||||||||
| #assignByElmByArg() | static | if (addend.c == 3 && factor.c == 4) factor has alpha, addend doesn't | |||||||||||||||||
| #assignToElm() | static | plug alpha (4th arg) with 1 prior to assigning separators | |||||||||||||||||
| if (addend.c == 4 && factor.c == 3) addend has alpha, factor doesn't | |||||||||||||||||||
| don't create a calc object for factor | |||||||||||||||||||
| class ECalc | How many permutations? | |||||||||
| name | type | description | dims | configs | ||||||
| Public methods | 0 | f | ||||||||
| calculate() | 1 | a | ||||||||
| static f() | factor = multiply | 1s | max | |||||||
| static a() | addend = add | 2 | min | |||||||
| Private | 2s | noop | ||||||||
| properties | ||||||||||
| #calcs | array: [calc object] | one per config, famm order is critical | 16 | |||||||
| #oneD | c00 | f,noop | a,noop | max,noop | min,noop | |||||
| #twoD | c01 | |||||||||
| #value | c01s | |||||||||
| calc by dimensionality methods: cNN | c02 | |||||||||
| #noop() | c02s | |||||||||
| #c00() | c10 | |||||||||
| #c01() | c11 | |||||||||
| #c01s() | the "s" is for "swap" dimensions | c11s | ||||||||
| #c02() | c12 | |||||||||
| #c02s() | c12s | |||||||||
| #c10() | c20 | |||||||||
| #c11() | c21 | |||||||||
| #c11s() | c21s | |||||||||
| #c12() | c22 | |||||||||
| #c12s() | c22s | |||||||||
| #c20() | noop | |||||||||
| #c21() | ||||||||||
| #c21s() | ||||||||||
| #c22() | ||||||||||
| #c22s() | ||||||||||
| first alternative: f, a, max, min | ||||||||||
| #noop() | still calls 1-4 functions every frame | |||||||||
| #f() | duplicate dimensionality code | |||||||||
| #a() | ||||||||||
| #max() | ||||||||||
| #min() | ||||||||||
| second alternative: famm (6 x f, 6 x a, 4 x m, 4 x mm) | ||||||||||
| #noop() | one function call does it all | |||||||||
| #f() | duplicate dimensionality code in every one, | |||||||||
| #a() | and it's cross-param dimensionality which | |||||||||
| #m() | means the longer the function name, the | |||||||||
| #fa() | more permutations, thus more code. | |||||||||
| #fm() | ||||||||||
| #am() | ||||||||||
| #mm() | ||||||||||
| #fam() | ||||||||||
| #fmm() | ||||||||||
| #amm() | ||||||||||
| #famm() | ||||||||||
| class EBezier | ||||
| Public | ||||
| name | type | description | ||
| constructor(x1, y1, x2, y2, time) | ~= CSS cubic-bezier(x1, y1, x2, y2) | |||
| time | int ms | setter-only, calculates #accuracy | ||
| solve() | float | solves the cubic bezier for x | ||
| Private | ||||
| properties | ||||
| #accuracy | float | calculated w/user input by set time() | ||
| #ax | float | |||
| #ay | float | |||
| #bx | float | |||
| #by | float | |||
| #cx | float | |||
| #cy | float | |||
| instance methods | ||||
| #sampleCurveX() | ||||
| #sampleCurveY() | ||||
| #sampleCurveDerivativeX() | ||||
| #solveCurveX(x) | ||||
| class Easy | increment: | 1 | 0.5 | 0.5 | leg[0].start overrides this.start | cumulative: | E.steps roundTrip | |||||||||||||||||||||||||||||||
| Public | other types have time | 0.25 | 0.75 | 0.25 | leg.at(-1).end overrides this.end | leg | wait | time | total | wait | time | {steps:1, jump:E.start} | ||||||||||||||||||||||||||
| getters and setters | obj: constructor(obj) | implied class: leg object | increment has time or count | 0.75 | 50% | this.zero is end of leg.wait | 0 | 100 | 1000 | 1100 | 0 | 100 | firstLeg | lastLeg | ||||||||||||||||||||||||
| name | type | description | name | type | description | name | type | description | arrived = time or endpoint | 0.25 | 0.75 | 50% | now is relative to leg.time | 1 | 200 | 500 | 700 | 1100 | 1300 | leftover | 2000 | |||||||||||||||||
| time | int ms | read-write, sets leg.time or {E.steps}.wait | time | int ms | required for non-incremental | type | int enum | required, preserved by #reverseMe() | if time, roundTrip ends vary | 0.25 | 0.75 | AFrame.start() | 2 | 300 | 2000 | 2300 | 1800 | 2100 | wait | 0 | 0 | |||||||||||||||||
| wait | int ms | read-write, setter calculates firstLeg.wait | wait | int ms | default: 0 | time | int > 0 | required for non-increment, preserved | roundTrip can't mix time & count | 0.25 | 0.75 | this.zero = timeStamp + this.wait | 600 | 3500 | 4100 | rtWait | 0 | 2000 | ||||||||||||||||||||
| loopWait | int ms | read-write, setter adjusts #totalWait | loopWait | int ms | wait time before starting a looped playback | count | int > 0 | semi-required by increment, preserved | impossible to set endpoints | 1.000000 | Easy.easeMe() | |||||||||||||||||||||||||||
| total | int ms | read-only, full duration, time + totalWait | tripWait | int ms | auto-trip pause, before heading inbound | wait | int >= 0 | can't have .wait with end | TRUE | if (timeStamp <= this.zero) | tS | now | zero | |||||||||||||||||||||||||
| plays | int | read-write, returns #playz, ignoring #loopByElm | start | number | default: 0 | start | number | it's either time or no time | ez: | now = timeStamp - this.zero | start() | 0 | -100 | 100 | ||||||||||||||||||||||||
| loopByElm | bool | read-write | end | number | default: 1 | end | number | end value for this leg | too much code to deal with it | .time | 1000 | Easy.ease() | leg[0] | 150 | 50 | 100 | ||||||||||||||||||||||
| inbound | bool | read-only, vs outbound, round-trip direction | downward | defined, no value | default: false | unit | number 0-1 | end unit interval for this leg | multi-leg can't mix time & end | .start | 50.0 | if (now > leg.time) { | leg[0] | 500 | 400 | 100 | ||||||||||||||||||||||
| roundTrip | bool | read-write, at end return to start, now or later | type | int: E.type | default: linear, pow:1 | down | bool | direction of unit interval | possible, but burdens other | .dist | 31.5 | do | leg[0] | 1099 | 999 | 100 | leg0 | leg1 | leg2 | |||||||||||||||||||
| tripWait | int ms | read-write, the auto-trip pause time | pow | number | these four are mutually exclusive: | dist | number > 0 | distance between start and end | types with extra code. | .end | 81.5 | now -= leg.time | leg[0] | 1101 | 1001 | 100 | leftover | 500 | 250 | 1000 | ||||||||||||||||||
| autoTrip | bool | read-write, auto-return to start | steps | array | in steps(): leg["steps"].slice() | part | number 0-1 | this leg's part of the whole | very obscure, not worth it | leg: | this.zero += leg.time | leg[1] | 1 | 1100 | wait | 25 | 100 | 200 | ||||||||||||||||||||
| (!autoTrip && roundTrip && plays > 1) is not allowed | bezier | array or EBezier | [0-1, 0-1, 0-1, 0-1]; 0-1 is a soft range. | prev | leg object | legs form linked lists | workaround via multiple | .total | 0 | 250 | 600 | 1000 | leg = leg.next | 1300 | rtWait | 600 | 450 | 1000 | ||||||||||||||||||||
| pre | callback | called just prior start of animation | increment | number | next | ditto | animations and .post() | .time | 0 | 250 | 350 | 400 | this.zero += leg.wait | leg[1] | 1300 | 0 | 1300 | |||||||||||||||||||||
| peri | callback | called once per frame | io | int enum | E.in .out .inOut .outIn: no Easy property | ease | the easing function to call | .dist | 0 | 7.88 | 11.03 | 12.60 | b = now > leg.time + leg.wait | leg[1] | 1849 | 549 | 1300 | |||||||||||||||||||||
| post | callback | called when animation arrives | plays | int | defaults to .loops + 1 || .repeats + 1 || 1 | io | int E.in or E.out | temporary until #reverseMe() called | steps: | .start | 50.0 | 50.00 | 57.88 | 68.90 | if (b) | leg[1] | 1851 | 551 | 1300 | 3 | 3 | 3 | 2 | 4 | ||||||||||||||
| loop | callback | called when playback loops | loopByElm | bool | loop by element | pow | number not 0 | duration = time | 121 | now -= leg.wait | leg[2] | 51 | 1800 | steps array waits: | start | end | both | none | ||||||||||||||||||||
| targets | array | read-write, get returns a shallow copy | count | int | increment count (vs time) | bezier | array or EBezier | # of steps / time | x | 0.48 | while (b) | 2100 | 0 | 0.000 | 0.333 | 0.000 | 0.250 | |||||||||||||||||||||
| isEasy | bool | read-only, always true, better than instanceof Easy | legs | array [{}] | .map(v => Object.assign(v)) in constructor() | increment | number | ease = linear or easy | 1 - x | 0.52 | if (now < leg.wait) | leg[2] | 2100 | 0 | 2100 | 1 | 0.333 | 0.667 | 0.500 | 0.500 | ||||||||||||||||||
| methods | targets | array [Easer] | new Set() | steps | array or int > 0 | timing = linear or easy | in | 0.48 | e.status = E.pausing | leg[2] | 4149 | 2049 | 2100 | 2 | 0.667 | 1.000 | 1.000 | 0.750 | ||||||||||||||||||||
| recycle() | undefined | pre | function | runs pre-animation | waits | array [int] | steps-only, pre-#stepsToLegs timing | use leg.wait in between steps | out | 0.48 | e.value = leg.prev.end | 4151 | 2051 | 2100 | ||||||||||||||||||||||||
| flip() | undefined | flips this.unit direction | peri | function | runs every frame | ends | array, Easy, undef | ditto, pre-#stepsToLegs end values | steps blurs .wait and .time | in | 53.81 | return e | 51 | 4100 | ||||||||||||||||||||||||
| trip() | undefined | flips round-trip direction, outbound vs inbound | post | function | runs post-animation | easy | Easy, undef | for easing .steps | out | 53.81 | } | #plugOne() | ||||||||||||||||||||||||||
| newTarget() | Easer* | creates a new Easer and adds it to #targets | alt user property names | timing | array, Easy, undef | user-defined timing per step | distance is always positive: | 543 | e.value = calc(now / leg.time) | o.numBeg | nb | |||||||||||||||||||||||||||
| addTarget() | undefined | adds an Easer to #targets | downward | .down | jump | int enum | E.none - E.both, defaults to E.end | if (end < start) .down = true | x | 0.84 | e.status = E.going || E.coming | o.numEnd | ne | |||||||||||||||||||||||||
| cutTarget() | bool | was an item deleted? | plays | .repeats + 1 | .down uses 1 - N | 1 - x | 0.16 | must set or check status every time… | 0 | 1 | 2 | 4 | izero | pzero | ||||||||||||||||||||||||
| "Protected" | loopByElm | .loopByElement | 16.2160000238 | end &| start can be negative | in | 0.84 | in | out | _in | _out | l | o.cv | ||||||||||||||||||||||||||
| _easeMe() | this.e.status | called by Easies.prototype._easeEm() | 364.1000000238 | out | 0.84 | test steps html: | in: | 0 | 0 | 0 | 0 | 0 | o.seps | |||||||||||||||||||||||||
| _loopByElm() | bool | validates elmCount and sets #plays | 347.884 | steps properties | in | 67.10 | # of steps | out: | 1 | 0 | 1 | 0 | 0 | |||||||||||||||||||||||||
| _resume() | undefined | prepares to resume post-pause | .steps | out | 67.10 | jump | inIn: | 2 | 0 | 0 | 2 | 0 | ||||||||||||||||||||||||||
| _zero() | undefined | sychronizes #zero to now | o.time | o.count | .jump | 897 | (direction?) | outIn: | 3 | 0 | 1 | 2 | 0 | |||||||||||||||||||||||||
| Private | class Easy | no | no | .timing | x | 0.74 | array of step values | inOut: | 4 | 0 | 0 | 0 | 4 | steps: | ease values | |||||||||||||||||||||||
| instance properties | Private | every leg must have increment and time or two out of three | 1 - x | 0.26 | outOut: | 5 | 0 | 1 | 0 | 4 | user or auto-generated values | |||||||||||||||||||||||||||
| #time | int ms | getter and setter, required field | instance methods | yes | no | hardcoded steps | in | 0.74 | timing as Easy | |||||||||||||||||||||||||||||
| #count | int | required for E.increment w/o time | #ease() | called as #run() from _easeMe() | no | yes | user passes in array | out | 0.74 | timing as array of times (ascending) | x | drawAsSteps | ease time | |||||||||||||||||||||||||
| #plays | int | setter, defaults to 1, must be > 0 | #increment() | ditto | spread to leg[tc] | .steps and .timing | in | 78.26 | x | start value | ||||||||||||||||||||||||||||
| #_plays | int | backup for #plays, which changes | #nextLeg() | helps #ease() and #increment time-based | every non-spread leg must have i and t or 2 of 3 | .steps[0] defines .start | out | 78.26 | x | end value | ||||||||||||||||||||||||||||
| #targets | Set(Easer*) | getter and setter, empty ok, never undefined | #incrementLeg() | helps #increment | yes | yes | .steps.at(-1) defines .end | x | mid value | steps w/o jump end: roundTrip | ||||||||||||||||||||||||||||
| #maxElms | int | max elements across targets, for calculating #plays | #powIn | one of them wins, and early | .timing defines .jump | 1 | 0 | 1 | 0 | x | wait | autoTrip: | tripWait += #lastLeg.wait | |||||||||||||||||||||||||
| #wait | int ms | initial wait time before animating anything | #powOut | .timing is start times | 5 | 5 | 6 | 4 | x | mid | else: | tripWait irrelevant | ||||||||||||||||||||||||||
| #pause | int ms | pause time between loop iterations | #bezier | not durations like .time | 200.000 | 5 | end | start | none | both | x | gap | ||||||||||||||||||||||||||
| #pauseRT | int ms | the pause between E.outbound and E.inbound | #validateTime() | helps constructor and time setter | iterable, not just array? | 0 | 200 | 0 | 166.6666666667 | 0 | x | roundTrip | ||||||||||||||||||||||||||
| #zero | int ms | runtime essential, "protected" setter _zero() | #allocateLegTime() | helps time setter | 1 | 400 | 200 | 333.3333333333 | 250 | x | autoTrip | set:E.set | real | 0 masked args and no cv, user or DOM. | ||||||||||||||||||||||||
| #now | int ms | for resuming post-pause | #prepLegs() | constructor first iteration over legs | set plays() | if (!_playsByElm()) | process steps early | 2 | 600 | 400 | 500 | 500 | x | pauseRT | enableRestore | get DOM values? | ||||||||||||||||||||||
| #run | function | either ease() or incrementBy*() | #finishLegs() | ditto second iteration | set loopByElm() | ditto | if timing[], !!relative times!! | 3 | 800 | 600 | 666.6666666667 | 750 | x | autoReset | hasElms | pseudo | ||||||||||||||||||||||
| #pre | callback | getter and setter | #finishInc() | ditto for E.increment | newTarget() | o.loopByElm = _playsByElm(o.l) | just like any leg | 4 | 1000 | 800 | 833.3333333333 | 1000 | x | plays <select> 1-9 | hasProp | |||||||||||||||||||||||
| #peri | callback | ditto | #legTime() | addTarget() | _playsByElm(t.elmCount) | leg.time = timing.at(-1) | TRUE | TRUE | TRUE | TRUE | x | pause | ||||||||||||||||||||||||||
| #post | callback | ditto | #legUnit() | cutTarget() | _playsByElm() | so jump is only end or both | ||||||||||||||||||||||||||||||||
| #loop | callback | ditto, called when playback loops, #plays - 1 times | #reverseMe() | else portional times only | end | dist | tDist | part | unit | |||||||||||||||||||||||||||||
| #start | float | defaults to 0 | static methods | constructor() | calc times in leg process | start | 12 | 0 | 0 | 0 | 0 | |||||||||||||||||||||||||||
| #end | float | defaults to 1 | #instanceOfE() | set target() | #loopByElm === undefined | each step becomes a leg | 19 | 7 | 7 | 0.2916666667 | 0.2916666667 | |||||||||||||||||||||||||||
| #dist | float | distance: Math.abs(this.#end - this.#start) | #linear() | set loopByElm() | #_plays = ? | 27 | 8 | 15 | 0.3333333333 | 0.625 | ||||||||||||||||||||||||||||
| #base | float | #down ? #end : #start; | #sineIn() | 31 | 4 | 19 | 0.1666666667 | 0.7916666667 | ||||||||||||||||||||||||||||||
| #unit | float | end value for e.unit, the unit interval [0-1] | #sineOut() | end | 36 | 5 | 24 | 0.2083333333 | 1 | |||||||||||||||||||||||||||||
| #down | bool | getter = .downward, true = 1 - e.unit | #circIn() | dist | 24 | |||||||||||||||||||||||||||||||||
| #isInc | bool | true = type:E.increment | #circOut() | 21.5 | 2.5 | 0.3125 | 0.1041666667 | 0.3958333333 | ||||||||||||||||||||||||||||||
| #inbound | bool | getter = .inbound, true = round-tripping | #expoIn() | TRUE | 0.3958333333 | |||||||||||||||||||||||||||||||||
| #reversed | bool | has reverseMe() been run? | #expoOut() | end | dist | tDist | part | unit | ||||||||||||||||||||||||||||||
| #revert | bool | getter and setter | #backIn() | start | 36 | 0 | 0 | 0 | 1 | |||||||||||||||||||||||||||||
| #roundTrip | bool | getter and setter | #backOut() | Easy | 31 | 5 | 5 | 0.2083333333 | 0.7916666667 | |||||||||||||||||||||||||||||
| #loopByElm | bool | set once, getter/setter as enhancement? | #elasticIn() | status == E.arrived, initially | 27 | 4 | 9 | 0.1666666667 | 0.625 | |||||||||||||||||||||||||||||
| #leg | leg object | the current leg in this animation | #elasticOut() | 19 | 8 | 17 | 0.3333333333 | 0.2916666667 | ||||||||||||||||||||||||||||||
| #firstLeg | leg object | the first leg in the linked list | #bounceIn() | end | 12 | 7 | 24 | 0.2916666667 | 0 | |||||||||||||||||||||||||||||
| #lastLeg | leg object | ditto for reverting and round-tripping | #type() | dist | 24 | |||||||||||||||||||||||||||||||||
| #cNoTime | int count | # of user legs that don't define time | #steps() | 21.5 | 5.5 | 0.6875 | 0.2291666667 | 0.3958333333 | ||||||||||||||||||||||||||||||
| #legsTime | int ms | total time of legs that define time | #legType() | TRUE | 0.3958333333 | TRUE | ||||||||||||||||||||||||||||||||
| static properties | #io() | |||||||||||||||||||||||||||||||||||||
| #eases | 2D array | [io[ease function]] for setting leg.ease | #legEase() | |||||||||||||||||||||||||||||||||||
| #typeNames | object | E.type:"type" for #type() and #legType() | #reverseLeg() | |||||||||||||||||||||||||||||||||||
| #greaterThan0 | array | preset argument values for #number() | #legText() | |||||||||||||||||||||||||||||||||||
| #unDefGrThan0 | array | ditto plus one more | #number() | |||||||||||||||||||||||||||||||||||
| #twoPi3 | float | (2 * Math.PI) / 3; for #elastic*() | #isNumberArray() | |||||||||||||||||||||||||||||||||||
| #stepsToLegs() | ||||||||||||||||||||||||||||||||||||||
| #easeSteps() | ||||||||||||||||||||||||||||||||||||||
| #stepsPrevEnd() | ||||||||||||||||||||||||||||||||||||||
| class Easies | What should the syntax for multiFunc measers be? | ||||||||||
| name | type | description | at the top level like everything else? | ||||||||
| Public | that is simpler for the basic code, but harder to tell if each mf has 1 easy | ||||||||||
| getters and setters | requires waiting until o.mask is set, late in the process | ||||||||||
| size | int | this.#easies.size | users must figure out the arg indexes across funcs - oh the horror! | ||||||||
| isEasies | bool | read-only, always true, better than ("x" in obj) | or within each multiFunc object? | ||||||||
| Set emulation | that aligns with the mask property, which is good | ||||||||||
| has() | bool | this.#easies.has() | requires validation that every mf has easies | ||||||||
| add() | undefined | this.#easies.add() | a bit odd for 1-arg functions: do I require a one-element array? | ||||||||
| delete() | bool | this.#easies.delete() plus | no, you can use the .easy property here and here alone | ||||||||
| clear() | undefined | clears #easies, #backup, #targets, #easy2Targets | |||||||||
| [Symbol.iterator]() | iterator | this.#easies.values() | #easies | ||||||||
| instance methods | #active | ||||||||||
| recycle() | undefined | runs every easy.recycle() | |||||||||
| newTarget() | Measer* | creates new Measer*, adds it to #targets, easy2Targets | For each easy: | ||||||||
| addTarget() | Measer* | adds existing Measer* to #targets, easy2Targets | targets' play count | ||||||||
| cutTarget() | bool | did the target exist? was it deleted? | Map(Easy, Map(target, plays)) | ||||||||
| clearTargets() | undefined | clears #targets and the Sets in #easy2Targets.values() | when !plays, delete target from map | ||||||||
| static methods | when !map.size delete easy from map | ||||||||||
| createFromTargets() | Easies | creates an Easies instance from [Measer*] | when outer !map.size you have arrived | ||||||||
| last() | static | gets last Easy playing | |||||||||
| "Protected" | For each measer: | ||||||||||
| methods | active easies | ||||||||||
| _easeEm() | bool: E.arrived=false | called every frame by AFrame.animate() | Map(Measer, Set(Easy)) | ||||||||
| _end() | undefined | cleans up after animation ends, AFrame.stop() | |||||||||
| _resume() | undefined | resumes after animation paused, AFrame.play() | 255 | ||||||||
| _zero | number: now | write-only, initializes easies for fresh playback | checked | undefined | 0.85 | ||||||
| Private | checked | unchecked | 216.75 | ||||||||
| properties | checked | checked | |||||||||
| #easies | Set(Easy) | the easies | unchecked | undefined | |||||||
| #backup | Set(Easy) | backup of #easies | unchecked | unchecked | |||||||
| #targets | Set(Measer) | the multi-ease targets, instances of Measer* | unchecked | checked | |||||||
| #easy2Targets | Map(Easy, Set(Measer*)) | collects the targets by Easy | |||||||||
| methods | |||||||||||
| #setTarget() | helps newTarget() and addTarget() | ||||||||||
| #instanceOfM() | bool | validator callback for Ez.toArray(), M = Measer* | |||||||||
| class AFrame | ||||
| name | type | description | ||
| Public | ||||
| property | ||||
| keepPost | bool | default = false = one-shot post() | ||
| getters and setters | ||||
| targets | Set(Easies &| ACues) | read-write | ||
| peri | callback | read-write, runs once per #animate() | ||
| post | callback | read-write, runs on arrival | ||
| onArrival | status value | read-write, the state to set on arrival | ||
| oneShot | bool | read-write, true sets onArrival = E.empty | ||
| status | bool | read-only, this.#status | ||
| atOrigin | bool | read-only, this.#status == E.original | ||
| atStart | bool | read-only, this.#status == E.initial | ||
| atEnd | bool | read-only, this.#status == E.arrived | ||
| isPaused | bool | read-only, this.#status == E.paused | ||
| isRunning | bool | read-only, this.#status == E.running | ||
| isEmpty | bool | read-only, this.#status == E.empty | ||
| fps | bool | read-only, test() results | ||
| gpu | bool | ditto | ||
| methods | ||||
| play() | ||||
| pause() | ||||
| stop() | ||||
| test() | ||||
| Private | ||||
| properties | ||||
| #targets | Set(Easies &| ACues) | the animation targets | ||
| #backup | Set(Easies &| ACues) | backup of #targets, which depletes | ||
| #promise | Promise | with resolve() and reject() properties | ||
| #status | int enum | E.arrived, E.initial - E.empty | ||
| #onArrival | status value | excludes E.runnning and E.paused | ||
| #paused | bool | am I paused now? | ||
| #frame; | int | for cancelAnimationFrame() | ||
| #peri | callback | getter and setter | ||
| #post | callback | ditto | ||
| #cFrames; | int | frame count for .test() | ||
| #fps | number | calculated frames per second | ||
| #fpsMin; | number | user minimum value for pass/fail | ||
| #gpu | bool | pass/fail result | ||
| #gpuPost; | callback | runs after .test() completes | ||
| #skip; | int | # of frames to skip at top of test | ||
| methods | ||||
| #animate() | ||||
| #runPost() | ||||
| #endEasies() | ||||
| #endCues() | ||||
| #skipFrames() | ||||
| #frames() | ||||
| #fps_gpu() | ||||
| class ACues | ||||
| name | type | description | ||
| Public | ||||
| getters and setters | ||||
| cues | array: [{}] | read-write | ||
| pre | callback | read-write | ||
| peri | callback | read-write, defaults to default() | ||
| post | callback | read-write | ||
| callback | wrapper | alias for .peri | ||
| elms | array: [Element] | elements for default() | ||
| prop | Prop | the property to set in default() | ||
| validate | bool | validate user cues or not, default = true | ||
| isACues | bool | read-only, always returns true | ||
| methods | ||||
| default() | the default callback/peri function | |||
| newCue() | ||||
| addCue() | ||||
| splice() | ||||
| push() | ||||
| unshift() | ||||
| insert() | ||||
| "Protected" | ||||
| methods | ||||
| _next() | ||||
| _resume() | ||||
| _zero() | ||||
| _reset() | ||||
| _runPost() | ||||
| Private | ||||
| properties | ||||
| #cues | array: [cue] | |||
| #i | integer | current index into #cues | ||
| #last | integer | last cue index (#cues.length - 1) | ||
| #now | number | |||
| #zero | number | |||
| #elms | array: [Element] | |||
| #prop | Prop | |||
| #pre | callback | ditto | ||
| #peri | callback | getter and setter | ||
| #post | callback | ditto | ||
| #validate | callback | for Ez.toArray(), can be undefined | ||
| methods | ||||
| #validCue() | ||||
| #insertCue() | ||||
| #addNew() | ||||
| Presets | properties | type | io | 1030 | 0.97353 | |||||||||||||||||||||||||||||||||||||
| Easy- | MEaser- | time* | linear | in | 28 | 0.02647 | 833 | |||||||||||||||||||||||||||||||||||
| default | default | type | sine | out | 1058 | 0.027184466 | @default rem = 16px: | 612 | 0.00001 | 0.00000 | 0.00000 | -0.00002 | -0.00002 | |||||||||||||||||||||||||||||
| sineIn | bezierABC | io | circ | inOut | 1030 | 1030 | for now 720p minimum within bounds, no steps or elastic | 0.7346938776 | -0.00001 | 0.00000 | 0.00000 | 0.00002 | 0.00002 | |||||||||||||||||||||||||||||
| sineOut | multiSteps | mid | expo | OutIn | easings test page is relatively very square | 650.4375 | 0.97355 | 625.484375 | 0.97354 | 610.0625 | 0.97354 | 548 | 0.97355 | 492 | 0.97356 | |||||||||||||||||||||||||||
| circInOut | multiStepsEz | split | back | InIn | E.elastic == max out of bounds | 17.671875 | 0.02645 | 17 | 0.02646 | 16.578125 | 0.02646 | 14.890625 | 0.02645 | 13.359375 | 0.02644 | |||||||||||||||||||||||||||
| circOutIn | gap | elastic | OutOut | not ok for >90% of phones, requires vertical design, no sidebar | 668.109375 | 1.00000 | 642.484375 | 1.00000 | 626.640625 | 1.00000 | 562.890625 | 1.00000 | 505.359375 | 1.00000 | ||||||||||||||||||||||||||||
| elasticInIn | roundTrip | bounce | html | chart | minimum viewport sizes | ok for some tablets, >90% laptops, especially more recent ones | ||||||||||||||||||||||||||||||||||||
| bounceOutOut | autoTrip | pow | font-size | min-width | linear | steps | elastic | 630 | ||||||||||||||||||||||||||||||||||
| pow_0.5 | flipTrip | bezier | 18 | 15 | 13 | 100.00% | 16px | 608 | diff | 855 | x | 716 | 855 | x | 747 | 855 | x | 941 | min: | 855 | x | 716 | 0.837 | 6 | ||||||||||||||||||
| pow_2.5 | tripWait | steps | 16.875 | 14.0625 | 12.1875 | 93.75% | 15px | 574 | 34 | 806.313 | x | 681.813 | 806.313 | x | 710.813 | 806.313 | x | 895.625 | max: | 855 | x | 941 | 1.101 | 10 | ||||||||||||||||||
| pow_2.5o/5i | plays | increment | 15.75 | 13.125 | 11.375 | 87.50% | 14px | 548 | 26 | 759.375 | x | 642.25 | 759.375 | x | 669.25 | 759.375 | x | 841.25 | VGA | 640 | x | 480 | 0.750 | 209 | ||||||||||||||||||
| sine + pow | loopWait | 14.625 | 12.1875 | 10.5625 | 81.25% | 13px | 522 | 26 | 719.563 | x | 607.437 | 719.563 | x | 632.437 | 719.563 | x | 798.875 | HD | 1920 | x | 1080 | 0.563 | 17 | |||||||||||||||||||
| bezierA | 13.5 | 11.25 | 9.75 | 75.00% | 12px | 492 | 30 | 674.75 | x | 573.5 | 674.75 | x | 596.5 | 674.75 | x | 749.25 | 242 | |||||||||||||||||||||||||
| bezierB | 16.61538 | 13.84615 | 12 | 68.75% | 11px | 466 | 26 | 872 | ||||||||||||||||||||||||||||||||||
| bezierC | 0.9230769231 | 62.50% | 10px | 440 | 26 | 0.0643274854 | 43.4049707602 | 631.3450292398 | ||||||||||||||||||||||||||||||||||
| bezierD | 595 | |||||||||||||||||||||||||||||||||||||||||
| steps_15 | 578.366 | 579.0996970777 | 579.2812 | calc(13px / (13px - round(down, (16px - 1rem) / 3, 1px))) | ||||||||||||||||||||||||||||||||||||||
| steps_easeT | 16.634 | 15.9003029223 | 15.7188 | 25 | 65 | 96 | ||||||||||||||||||||||||||||||||||||
| steps_easeV | 0 | 0 | 13 | 13 | 65 | 31 | 31 | |||||||||||||||||||||||||||||||||||
| steps_easeTV | 1904 | 1 | 0.3333333333 | 12.6666666667 | 13 | 6 | 1 | 2 | ||||||||||||||||||||||||||||||||||
| steps_outIn | 15px | 333 | 2 | 0.6666666667 | 12.3333333333 | 13 | 3 | |||||||||||||||||||||||||||||||||||
| steps_oIline | width: | 794.688 | 800.313 | 5.7177177177 | 3 | 1 | 12 | 12 | 56 | 56 | 87 | |||||||||||||||||||||||||||||||
| steps_oIbezB | height: | 879.188 | 884.813 | elastic | ||||||||||||||||||||||||||||||||||||||
| mid | 741 | 746.625 | steps | <input type="number> | ||||||||||||||||||||||||||||||||||||||
| split | 710 | 715.625 | linear | isSpinning = mousedown || (keydown && ("ArrowDown" || "ArrowUp")) | ||||||||||||||||||||||||||||||||||||||
| gap | 2.8125 | 5.625 | borderW * 2 | 1030 | format oninput if (isSpinning) | |||||||||||||||||||||||||||||||||||||
| msg350 | 6.5625 | 1403 | always format onchange (any other way?) | |||||||||||||||||||||||||||||||||||||||
| autoTrip | 9.375 | padLeft | 0.7341411262 | |||||||||||||||||||||||||||||||||||||||
| manualTrip | 186.406 | 886 | 991 | window.innerHeight | window.innerHeight | |||||||||||||||||||||||||||||||||||||
| tripNoFlip | 195.781 | lefties[1].offsetWidth | 650.4490377762 | 10 | topBottom | topBottom | ||||||||||||||||||||||||||||||||||||
| tripWait | 15.594 | range.svg.clientWidth | 6 | offShadow * 2 | offShadow * 2 | |||||||||||||||||||||||||||||||||||||
| flow_down | 65 | elms.diptych.offsetHeight | elms.diptych.offsetHeight | |||||||||||||||||||||||||||||||||||||||
| plays_3 | 226.375 | 25 | elms.x.offsetHeight | elms.x.offsetHeight | ||||||||||||||||||||||||||||||||||||||
| loopWait | ||||||||||||||||||||||||||||||||||||||||||
| loopByElm | ||||||||||||||||||||||||||||||||||||||||||
| JavaScript | CSS | rgb | hsl | hwb | hsl | hwb | R | G | B | hue | s | l | w | b | r | g | b | min | max | diff | sum | ||||||||||||||
| aliceblue | rgb:[240,248,255], hsl:[208.0,100.0, 97.1], hwb:[208.0, 94.1, 0.0] | rgb(240 248 255) | hsl(208 100% 97.1%) | hwb(208 94.1% 0%) | 240 | 248 | 255 | 208.0 | 100.0 | 97.1 | 208.0 | 94.1 | 0.0 | 208 | 100 | 97.1 | 208 | 94.1 | 0 | 240 | 248 | 255 | 208 | 100 | 97 | 94 | 0 | 0.94 | 0.97 | 1.00 | 0.94 | 1.00 | 0.06 | 1.94 | 94.1% |
| antiquewhite | rgb:[250,235,215], hsl:[ 34.3, 77.8, 91.2], hwb:[ 34.3, 84.3, 2.0] | rgb(250 235 215) | hsl(34.3 77.8% 91.2%) | hwb(34.3 84.3% 2%) | 250 | 235 | 215 | 34.3 | 77.8 | 91.2 | 34.3 | 84.3 | 2.0 | 34.3 | 77.8 | 91.2 | 34.3 | 84.3 | 2 | 250 | 235 | 215 | 34 | 78 | 91 | 84 | 2 | 0.98 | 0.92 | 0.84 | 0.84 | 0.98 | 0.14 | 1.82 | |
| aqua | rgb:[ 0,255,255], hsl:[180.0,100.0, 50.0], hwb:[180.0, 0.0, 0.0] | rgb(0 255 255) | hsl(180 100% 50%) | hwb(180 0% 0%) | 0 | 255 | 255 | 180.0 | 100.0 | 50.0 | 180.0 | 0.0 | 0.0 | 180 | 100 | 50 | 180 | 0 | 0 | 0 | 255 | 255 | 180 | 100 | 50 | 0 | 0 | 0.00 | 1.00 | 1.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| aquamarine | rgb:[127,255,212], hsl:[159.8,100.0, 74.9], hwb:[159.8, 49.8, 0.0] | rgb(127 255 212) | hsl(159.8 100% 74.9%) | hwb(159.8 49.8% 0%) | 127 | 255 | 212 | 159.8 | 100.0 | 74.9 | 159.8 | 49.8 | 0.0 | 159.8 | 100 | 74.9 | 159.8 | 49.8 | 0 | 127 | 255 | 212 | 160 | 100 | 75 | 50 | 0 | 0.50 | 1.00 | 0.83 | 0.50 | 1.00 | 0.50 | 1.50 | 75.0000000 |
| azure | rgb:[240,255,255], hsl:[180.0,100.0, 97.1], hwb:[180.0, 94.1, 0.0] | rgb(240 255 255) | hsl(180 100% 97.1%) | hwb(180 94.1% 0%) | 240 | 255 | 255 | 180.0 | 100.0 | 97.1 | 180.0 | 94.1 | 0.0 | 180 | 100 | 97.1 | 180 | 94.1 | 0 | 240 | 255 | 255 | 180 | 100 | 97 | 94 | 0 | 0.94 | 1.00 | 1.00 | 0.94 | 1.00 | 0.06 | 1.94 | 1 |
| beige | rgb:[245,245,220], hsl:[ 60.0, 55.6, 91.2], hwb:[ 60.0, 86.3, 3.9] | rgb(245 245 220) | hsl(60 55.6% 91.2%) | hwb(60 86.3% 3.9%) | 245 | 245 | 220 | 60.0 | 55.6 | 91.2 | 60.0 | 86.3 | 3.9 | 60 | 55.6 | 91.2 | 60 | 86.3 | 3.9 | 245 | 245 | 220 | 60 | 56 | 91 | 86 | 4 | 0.96 | 0.96 | 0.86 | 0.86 | 0.96 | 0.10 | 1.82 | |
| bisque | rgb:[255,228,196], hsl:[ 32.5,100.0, 88.4], hwb:[ 32.5, 76.9, 0.0] | rgb(255 228 196) | hsl(32.5 100% 88.4%) | hwb(32.5 76.9% 0%) | 255 | 228 | 196 | 32.5 | 100.0 | 88.4 | 32.5 | 76.9 | 0.0 | 32.5 | 100 | 88.4 | 32.5 | 76.9 | 0 | 255 | 228 | 196 | 33 | 100 | 88 | 77 | 0 | 1.00 | 0.89 | 0.77 | 0.77 | 1.00 | 0.23 | 1.77 | |
| black | rgb:[ 0, 0, 0], hsl:[ 0.0, 0.0, 0.0], hwb:[ 0.0, 0.0,100.0] | rgb(0 0 0) | hsl(0 0% 0%) | hwb(0 0% 100%) | 0 | 0 | 0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 100.0 | 0 | 0 | 0 | 0 | 0 | 100 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 100 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| blanchedalmond | rgb:[255,235,205], hsl:[ 36.0,100.0, 90.2], hwb:[ 36.0, 80.4, 0.0] | rgb(255 235 205) | hsl(36 100% 90.2%) | hwb(36 80.4% 0%) | 255 | 235 | 205 | 36.0 | 100.0 | 90.2 | 36.0 | 80.4 | 0.0 | 36 | 100 | 90.2 | 36 | 80.4 | 0 | 255 | 235 | 205 | 36 | 100 | 90 | 80 | 0 | 1.00 | 0.92 | 0.80 | 0.80 | 1.00 | 0.20 | 1.80 | |
| blue | rgb:[ 0, 0,255], hsl:[240.0,100.0, 50.0], hwb:[240.0, 0.0, 0.0] | rgb(0 0 255) | hsl(240 100% 50%) | hwb(240 0% 0%) | 0 | 0 | 255 | 240.0 | 100.0 | 50.0 | 240.0 | 0.0 | 0.0 | 240 | 100 | 50 | 240 | 0 | 0 | 0 | 0 | 255 | 240 | 100 | 50 | 0 | 0 | 0.00 | 0.00 | 1.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| blueviolet | rgb:[138, 43,226], hsl:[271.1, 75.9, 52.7], hwb:[271.1, 16.9, 11.4] | rgb(138 43 226) | hsl(271.1 75.9% 52.7%) | hwb(271.1 16.9% 11.4%) | 138 | 43 | 226 | 271.1 | 75.9 | 52.7 | 271.1 | 16.9 | 11.4 | 271.1 | 75.9 | 52.7 | 271.1 | 16.9 | 11.4 | 138 | 43 | 226 | 271 | 76 | 53 | 17 | 11 | 0.54 | 0.17 | 0.89 | 0.17 | 0.89 | 0.72 | 1.05 | |
| brown | rgb:[165, 42, 42], hsl:[ 0.0, 59.4, 40.6], hwb:[ 0.0, 16.5, 35.3] | rgb(165 42 42) | hsl(0 59.4% 40.6%) | hwb(0 16.5% 35.3%) | 165 | 42 | 42 | 0.0 | 59.4 | 40.6 | 0.0 | 16.5 | 35.3 | 0 | 59.4 | 40.6 | 0 | 16.5 | 35.3 | 165 | 42 | 42 | 0 | 59 | 41 | 16 | 35 | 0.65 | 0.16 | 0.16 | 0.16 | 0.65 | 0.48 | 0.81 | |
| burlywood | rgb:[222,184,135], hsl:[ 33.8, 56.9, 70.0], hwb:[ 33.8, 52.9, 12.9] | rgb(222 184 135) | hsl(33.8 56.9% 70%) | hwb(33.8 52.9% 12.9%) | 222 | 184 | 135 | 33.8 | 56.9 | 70.0 | 33.8 | 52.9 | 12.9 | 33.8 | 56.9 | 70 | 33.8 | 52.9 | 12.9 | 222 | 184 | 135 | 34 | 57 | 70 | 53 | 13 | 0.87 | 0.72 | 0.53 | 0.53 | 0.87 | 0.34 | 1.40 | |
| cadetblue | rgb:[ 95,158,160], hsl:[181.8, 25.5, 50.0], hwb:[181.8, 37.3, 37.3] | rgb(95 158 160) | hsl(181.8 25.5% 50%) | hwb(181.8 37.3% 37.3%) | 95 | 158 | 160 | 181.8 | 25.5 | 50.0 | 181.8 | 37.3 | 37.3 | 181.8 | 25.5 | 50 | 181.8 | 37.3 | 37.3 | 95 | 158 | 160 | 182 | 25 | 50 | 37 | 37 | 0.37 | 0.62 | 0.63 | 0.37 | 0.63 | 0.25 | 1.00 | |
| chartreuse | rgb:[127,255, 0], hsl:[ 90.1,100.0, 50.0], hwb:[ 90.1, 0.0, 0.0] | rgb(127 255 0) | hsl(90.1 100% 50%) | hwb(90.1 0% 0%) | 127 | 255 | 0 | 90.1 | 100.0 | 50.0 | 90.1 | 0.0 | 0.0 | 90.1 | 100 | 50 | 90.1 | 0 | 0 | 127 | 255 | 0 | 90 | 100 | 50 | 0 | 0 | 0.50 | 1.00 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| chocolate | rgb:[210,105, 30], hsl:[ 25.0, 75.0, 47.1], hwb:[ 25.0, 11.8, 17.6] | rgb(210 105 30) | hsl(25 75% 47.1%) | hwb(25 11.8% 17.6%) | 210 | 105 | 30 | 25.0 | 75.0 | 47.1 | 25.0 | 11.8 | 17.6 | 25 | 75 | 47.1 | 25 | 11.8 | 17.6 | 210 | 105 | 30 | 25 | 75 | 47 | 12 | 18 | 0.82 | 0.41 | 0.12 | 0.12 | 0.82 | 0.71 | 0.94 | |
| coral | rgb:[255,127, 80], hsl:[ 16.1,100.0, 65.7], hwb:[ 16.1, 31.4, 0.0] | rgb(255 127 80) | hsl(16.1 100% 65.7%) | hwb(16.1 31.4% 0%) | 255 | 127 | 80 | 16.1 | 100.0 | 65.7 | 16.1 | 31.4 | 0.0 | 16.1 | 100 | 65.7 | 16.1 | 31.4 | 0 | 255 | 127 | 80 | 16 | 100 | 66 | 31 | 0 | 1.00 | 0.50 | 0.31 | 0.31 | 1.00 | 0.69 | 1.31 | |
| cornflowerblue | rgb:[100,149,237], hsl:[218.5, 79.2, 66.1], hwb:[218.5, 39.2, 7.1] | rgb(100 149 237) | hsl(218.5 79.2% 66.1%) | hwb(218.5 39.2% 7.1%) | 100 | 149 | 237 | 218.5 | 79.2 | 66.1 | 218.5 | 39.2 | 7.1 | 218.5 | 79.2 | 66.1 | 218.5 | 39.2 | 7.1 | 100 | 149 | 237 | 219 | 79 | 66 | 39 | 7 | 0.39 | 0.58 | 0.93 | 0.39 | 0.93 | 0.54 | 1.32 | |
| cornsilk | rgb:[255,248,220], hsl:[ 48.0,100.0, 93.1], hwb:[ 48.0, 86.3, 0.0] | rgb(255 248 220) | hsl(48 100% 93.1%) | hwb(48 86.3% 0%) | 255 | 248 | 220 | 48.0 | 100.0 | 93.1 | 48.0 | 86.3 | 0.0 | 48 | 100 | 93.1 | 48 | 86.3 | 0 | 255 | 248 | 220 | 48 | 100 | 93 | 86 | 0 | 1.00 | 0.97 | 0.86 | 0.86 | 1.00 | 0.14 | 1.86 | |
| crimson | rgb:[220, 20, 60], hsl:[348.0, 83.3, 47.1], hwb:[348.0, 7.8, 13.7] | rgb(220 20 60) | hsl(348 83.3% 47.1%) | hwb(348 7.8% 13.7%) | 220 | 20 | 60 | 348.0 | 83.3 | 47.1 | 348.0 | 7.8 | 13.7 | 348 | 83.3 | 47.1 | 348 | 7.8 | 13.7 | 220 | 20 | 60 | 348 | 83 | 47 | 8 | 14 | 0.86 | 0.08 | 0.24 | 0.08 | 0.86 | 0.78 | 0.94 | |
| cyan | rgb:[ 0,255,255], hsl:[180.0,100.0, 50.0], hwb:[180.0, 0.0, 0.0] | rgb(0 255 255) | hsl(180 100% 50%) | hwb(180 0% 0%) | 0 | 255 | 255 | 180.0 | 100.0 | 50.0 | 180.0 | 0.0 | 0.0 | 180 | 100 | 50 | 180 | 0 | 0 | 0 | 255 | 255 | 180 | 100 | 50 | 0 | 0 | 0.00 | 1.00 | 1.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| darkblue | rgb:[ 0, 0,139], hsl:[240.0,100.0, 27.3], hwb:[240.0, 0.0, 45.5] | rgb(0 0 139) | hsl(240 100% 27.3%) | hwb(240 0% 45.5%) | 0 | 0 | 139 | 240.0 | 100.0 | 27.3 | 240.0 | 0.0 | 45.5 | 240 | 100 | 27.3 | 240 | 0 | 45.5 | 0 | 0 | 139 | 240 | 100 | 27 | 0 | 45 | 0.00 | 0.00 | 0.55 | 0.00 | 0.55 | 0.55 | 0.55 | |
| darkcyan | rgb:[ 0,139,139], hsl:[180.0,100.0, 27.3], hwb:[180.0, 0.0, 45.5] | rgb(0 139 139) | hsl(180 100% 27.3%) | hwb(180 0% 45.5%) | 0 | 139 | 139 | 180.0 | 100.0 | 27.3 | 180.0 | 0.0 | 45.5 | 180 | 100 | 27.3 | 180 | 0 | 45.5 | 0 | 139 | 139 | 180 | 100 | 27 | 0 | 45 | 0.00 | 0.55 | 0.55 | 0.00 | 0.55 | 0.55 | 0.55 | |
| darkgoldenrod | rgb:[184,134, 11], hsl:[ 42.7, 88.7, 38.2], hwb:[ 42.7, 4.3, 27.8] | rgb(184 134 11) | hsl(42.7 88.7% 38.2%) | hwb(42.7 4.3% 27.8%) | 184 | 134 | 11 | 42.7 | 88.7 | 38.2 | 42.7 | 4.3 | 27.8 | 42.7 | 88.7 | 38.2 | 42.7 | 4.3 | 27.8 | 184 | 134 | 11 | 43 | 89 | 38 | 4 | 28 | 0.72 | 0.53 | 0.04 | 0.04 | 0.72 | 0.68 | 0.76 | |
| darkgray | rgb:[169,169,169], hsl:[ 0.0, 0.0, 66.3], hwb:[ 0.0, 66.3, 33.7] | rgb(169 169 169) | hsl(0 0% 66.3%) | hwb(0 66.3% 33.7%) | 169 | 169 | 169 | 0.0 | 0.0 | 66.3 | 0.0 | 66.3 | 33.7 | 0 | 0 | 66.3 | 0 | 66.3 | 33.7 | 169 | 169 | 169 | 0 | 0 | 66 | 66 | 34 | 0.66 | 0.66 | 0.66 | 0.66 | 0.66 | 0.00 | 1.33 | |
| darkgreen | rgb:[ 0,100, 0], hsl:[120.0,100.0, 19.6], hwb:[120.0, 0.0, 60.8] | rgb(0 100 0) | hsl(120 100% 19.6%) | hwb(120 0% 60.8%) | 0 | 100 | 0 | 120.0 | 100.0 | 19.6 | 120.0 | 0.0 | 60.8 | 120 | 100 | 19.6 | 120 | 0 | 60.8 | 0 | 100 | 0 | 120 | 100 | 20 | 0 | 61 | 0.00 | 0.39 | 0.00 | 0.00 | 0.39 | 0.39 | 0.39 | |
| darkgrey | rgb:[169,169,169], hsl:[ 0.0, 0.0, 66.3], hwb:[ 0.0, 66.3, 33.7] | rgb(169 169 169) | hsl(0 0% 66.3%) | hwb(0 66.3% 33.7%) | 169 | 169 | 169 | 0.0 | 0.0 | 66.3 | 0.0 | 66.3 | 33.7 | 0 | 0 | 66.3 | 0 | 66.3 | 33.7 | 169 | 169 | 169 | 0 | 0 | 66 | 66 | 34 | 0.66 | 0.66 | 0.66 | 0.66 | 0.66 | 0.00 | 1.33 | |
| darkkhaki | rgb:[189,183,107], hsl:[ 55.6, 38.3, 58.0], hwb:[ 55.6, 42.0, 25.9] | rgb(189 183 107) | hsl(55.6 38.3% 58%) | hwb(55.6 42% 25.9%) | 189 | 183 | 107 | 55.6 | 38.3 | 58.0 | 55.6 | 42.0 | 25.9 | 55.6 | 38.3 | 58 | 55.6 | 42 | 25.9 | 189 | 183 | 107 | 56 | 38 | 58 | 42 | 26 | 0.74 | 0.72 | 0.42 | 0.42 | 0.74 | 0.32 | 1.16 | |
| darkmagenta | rgb:[139, 0,139], hsl:[300.0,100.0, 27.3], hwb:[300.0, 0.0, 45.5] | rgb(139 0 139) | hsl(300 100% 27.3%) | hwb(300 0% 45.5%) | 139 | 0 | 139 | 300.0 | 100.0 | 27.3 | 300.0 | 0.0 | 45.5 | 300 | 100 | 27.3 | 300 | 0 | 45.5 | 139 | 0 | 139 | 300 | 100 | 27 | 0 | 45 | 0.55 | 0.00 | 0.55 | 0.00 | 0.55 | 0.55 | 0.55 | |
| darkolivegreen | rgb:[ 85,107, 47], hsl:[ 82.0, 39.0, 30.2], hwb:[ 82.0, 18.4, 58.0] | rgb(85 107 47) | hsl(82 39% 30.2%) | hwb(82 18.4% 58%) | 85 | 107 | 47 | 82.0 | 39.0 | 30.2 | 82.0 | 18.4 | 58.0 | 82 | 39 | 30.2 | 82 | 18.4 | 58 | 85 | 107 | 47 | 82 | 39 | 30 | 18 | 58 | 0.33 | 0.42 | 0.18 | 0.18 | 0.42 | 0.24 | 0.60 | |
| darkorange | rgb:[255,140, 0], hsl:[ 32.9,100.0, 50.0], hwb:[ 32.9, 0.0, 0.0] | rgb(255 140 0) | hsl(32.9 100% 50%) | hwb(32.9 0% 0%) | 255 | 140 | 0 | 32.9 | 100.0 | 50.0 | 32.9 | 0.0 | 0.0 | 32.9 | 100 | 50 | 32.9 | 0 | 0 | 255 | 140 | 0 | 33 | 100 | 50 | 0 | 0 | 1.00 | 0.55 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| darkorchid | rgb:[153, 50,204], hsl:[280.1, 60.6, 49.8], hwb:[280.1, 19.6, 20.0] | rgb(153 50 204) | hsl(280.1 60.6% 49.8%) | hwb(280.1 19.6% 20%) | 153 | 50 | 204 | 280.1 | 60.6 | 49.8 | 280.1 | 19.6 | 20.0 | 280.1 | 60.6 | 49.8 | 280.1 | 19.6 | 20 | 153 | 50 | 204 | 280 | 61 | 50 | 20 | 20 | 0.60 | 0.20 | 0.80 | 0.20 | 0.80 | 0.60 | 1.00 | |
| darkred | rgb:[139, 0, 0], hsl:[ 0.0,100.0, 27.3], hwb:[ 0.0, 0.0, 45.5] | rgb(139 0 0) | hsl(0 100% 27.3%) | hwb(0 0% 45.5%) | 139 | 0 | 0 | 0.0 | 100.0 | 27.3 | 0.0 | 0.0 | 45.5 | 0 | 100 | 27.3 | 0 | 0 | 45.5 | 139 | 0 | 0 | 0 | 100 | 27 | 0 | 45 | 0.55 | 0.00 | 0.00 | 0.00 | 0.55 | 0.55 | 0.55 | |
| darksalmon | rgb:[233,150,122], hsl:[ 15.1, 71.6, 69.6], hwb:[ 15.1, 47.8, 8.6] | rgb(233 150 122) | hsl(15.1 71.6% 69.6%) | hwb(15.1 47.8% 8.6%) | 233 | 150 | 122 | 15.1 | 71.6 | 69.6 | 15.1 | 47.8 | 8.6 | 15.1 | 71.6 | 69.6 | 15.1 | 47.8 | 8.6 | 233 | 150 | 122 | 15 | 72 | 70 | 48 | 9 | 0.91 | 0.59 | 0.48 | 0.48 | 0.91 | 0.44 | 1.39 | |
| darkseagreen | rgb:[143,188,143], hsl:[120.0, 25.1, 64.9], hwb:[120.0, 56.1, 26.3] | rgb(143 188 143) | hsl(120 25.1% 64.9%) | hwb(120 56.1% 26.3%) | 143 | 188 | 143 | 120.0 | 25.1 | 64.9 | 120.0 | 56.1 | 26.3 | 120 | 25.1 | 64.9 | 120 | 56.1 | 26.3 | 143 | 188 | 143 | 120 | 25 | 65 | 56 | 26 | 0.56 | 0.74 | 0.56 | 0.56 | 0.74 | 0.18 | 1.30 | |
| darkslateblue | rgb:[ 72, 61,139], hsl:[248.5, 39.0, 39.2], hwb:[248.5, 23.9, 45.5] | rgb(72 61 139) | hsl(248.5 39% 39.2%) | hwb(248.5 23.9% 45.5%) | 72 | 61 | 139 | 248.5 | 39.0 | 39.2 | 248.5 | 23.9 | 45.5 | 248.5 | 39 | 39.2 | 248.5 | 23.9 | 45.5 | 72 | 61 | 139 | 248 | 39 | 39 | 24 | 45 | 0.28 | 0.24 | 0.55 | 0.24 | 0.55 | 0.31 | 0.78 | |
| darkslategray | rgb:[ 47, 79, 79], hsl:[180.0, 25.4, 24.7], hwb:[180.0, 18.4, 69.0] | rgb(47 79 79) | hsl(180 25.4% 24.7%) | hwb(180 18.4% 69%) | 47 | 79 | 79 | 180.0 | 25.4 | 24.7 | 180.0 | 18.4 | 69.0 | 180 | 25.4 | 24.7 | 180 | 18.4 | 69 | 47 | 79 | 79 | 180 | 25 | 25 | 18 | 69 | 0.18 | 0.31 | 0.31 | 0.18 | 0.31 | 0.13 | 0.49 | |
| darkslategrey | rgb:[ 47, 79, 79], hsl:[180.0, 25.4, 24.7], hwb:[180.0, 18.4, 69.0] | rgb(47 79 79) | hsl(180 25.4% 24.7%) | hwb(180 18.4% 69%) | 47 | 79 | 79 | 180.0 | 25.4 | 24.7 | 180.0 | 18.4 | 69.0 | 180 | 25.4 | 24.7 | 180 | 18.4 | 69 | 47 | 79 | 79 | 180 | 25 | 25 | 18 | 69 | 0.18 | 0.31 | 0.31 | 0.18 | 0.31 | 0.13 | 0.49 | |
| darkturquoise | rgb:[ 0,206,209], hsl:[180.9,100.0, 41.0], hwb:[180.9, 0.0, 18.0] | rgb(0 206 209) | hsl(180.9 100% 41%) | hwb(180.9 0% 18%) | 0 | 206 | 209 | 180.9 | 100.0 | 41.0 | 180.9 | 0.0 | 18.0 | 180.9 | 100 | 41 | 180.9 | 0 | 18 | 0 | 206 | 209 | 181 | 100 | 41 | 0 | 18 | 0.00 | 0.81 | 0.82 | 0.00 | 0.82 | 0.82 | 0.82 | |
| darkviolet | rgb:[148, 0,211], hsl:[282.1,100.0, 41.4], hwb:[282.1, 0.0, 17.3] | rgb(148 0 211) | hsl(282.1 100% 41.4%) | hwb(282.1 0% 17.3%) | 148 | 0 | 211 | 282.1 | 100.0 | 41.4 | 282.1 | 0.0 | 17.3 | 282.1 | 100 | 41.4 | 282.1 | 0 | 17.3 | 148 | 0 | 211 | 282 | 100 | 41 | 0 | 17 | 0.58 | 0.00 | 0.83 | 0.00 | 0.83 | 0.83 | 0.83 | |
| deeppink | rgb:[255, 20,147], hsl:[327.6,100.0, 53.9], hwb:[327.6, 7.8, 0.0] | rgb(255 20 147) | hsl(327.6 100% 53.9%) | hwb(327.6 7.8% 0%) | 255 | 20 | 147 | 327.6 | 100.0 | 53.9 | 327.6 | 7.8 | 0.0 | 327.6 | 100 | 53.9 | 327.6 | 7.8 | 0 | 255 | 20 | 147 | 328 | 100 | 54 | 8 | 0 | 1.00 | 0.08 | 0.58 | 0.08 | 1.00 | 0.92 | 1.08 | |
| deepskyblue | rgb:[ 0,191,255], hsl:[195.1,100.0, 50.0], hwb:[195.1, 0.0, 0.0] | rgb(0 191 255) | hsl(195.1 100% 50%) | hwb(195.1 0% 0%) | 0 | 191 | 255 | 195.1 | 100.0 | 50.0 | 195.1 | 0.0 | 0.0 | 195.1 | 100 | 50 | 195.1 | 0 | 0 | 0 | 191 | 255 | 195 | 100 | 50 | 0 | 0 | 0.00 | 0.75 | 1.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| dimgray | rgb:[105,105,105], hsl:[ 0.0, 0.0, 41.2], hwb:[ 0.0, 41.2, 58.8] | rgb(105 105 105) | hsl(0 0% 41.2%) | hwb(0 41.2% 58.8%) | 105 | 105 | 105 | 0.0 | 0.0 | 41.2 | 0.0 | 41.2 | 58.8 | 0 | 0 | 41.2 | 0 | 41.2 | 58.8 | 105 | 105 | 105 | 0 | 0 | 41 | 41 | 59 | 0.41 | 0.41 | 0.41 | 0.41 | 0.41 | 0.00 | 0.82 | |
| dimgrey | rgb:[105,105,105], hsl:[ 0.0, 0.0, 41.2], hwb:[ 0.0, 41.2, 58.8] | rgb(105 105 105) | hsl(0 0% 41.2%) | hwb(0 41.2% 58.8%) | 105 | 105 | 105 | 0.0 | 0.0 | 41.2 | 0.0 | 41.2 | 58.8 | 0 | 0 | 41.2 | 0 | 41.2 | 58.8 | 105 | 105 | 105 | 0 | 0 | 41 | 41 | 59 | 0.41 | 0.41 | 0.41 | 0.41 | 0.41 | 0.00 | 0.82 | |
| dodgerblue | rgb:[ 30,144,255], hsl:[209.6,100.0, 55.9], hwb:[209.6, 11.8, 0.0] | rgb(30 144 255) | hsl(209.6 100% 55.9%) | hwb(209.6 11.8% 0%) | 30 | 144 | 255 | 209.6 | 100.0 | 55.9 | 209.6 | 11.8 | 0.0 | 209.6 | 100 | 55.9 | 209.6 | 11.8 | 0 | 30 | 144 | 255 | 210 | 100 | 56 | 12 | 0 | 0.12 | 0.56 | 1.00 | 0.12 | 1.00 | 0.88 | 1.12 | |
| firebrick | rgb:[178, 34, 34], hsl:[ 0.0, 67.9, 41.6], hwb:[ 0.0, 13.3, 30.2] | rgb(178 34 34) | hsl(0 67.9% 41.6%) | hwb(0 13.3% 30.2%) | 178 | 34 | 34 | 0.0 | 67.9 | 41.6 | 0.0 | 13.3 | 30.2 | 0 | 67.9 | 41.6 | 0 | 13.3 | 30.2 | 178 | 34 | 34 | 0 | 68 | 42 | 13 | 30 | 0.70 | 0.13 | 0.13 | 0.13 | 0.70 | 0.56 | 0.83 | |
| floralwhite | rgb:[255,250,240], hsl:[ 40.0,100.0, 97.1], hwb:[ 40.0, 94.1, 0.0] | rgb(255 250 240) | hsl(40 100% 97.1%) | hwb(40 94.1% 0%) | 255 | 250 | 240 | 40.0 | 100.0 | 97.1 | 40.0 | 94.1 | 0.0 | 40 | 100 | 97.1 | 40 | 94.1 | 0 | 255 | 250 | 240 | 40 | 100 | 97 | 94 | 0 | 1.00 | 0.98 | 0.94 | 0.94 | 1.00 | 0.06 | 1.94 | |
| forestgreen | rgb:[ 34,139, 34], hsl:[120.0, 60.7, 33.9], hwb:[120.0, 13.3, 45.5] | rgb(34 139 34) | hsl(120 60.7% 33.9%) | hwb(120 13.3% 45.5%) | 34 | 139 | 34 | 120.0 | 60.7 | 33.9 | 120.0 | 13.3 | 45.5 | 120 | 60.7 | 33.9 | 120 | 13.3 | 45.5 | 34 | 139 | 34 | 120 | 61 | 34 | 13 | 45 | 0.13 | 0.55 | 0.13 | 0.13 | 0.55 | 0.41 | 0.68 | |
| fuchsia | rgb:[255, 0,255], hsl:[300.0,100.0, 50.0], hwb:[300.0, 0.0, 0.0] | rgb(255 0 255) | hsl(300 100% 50%) | hwb(300 0% 0%) | 255 | 0 | 255 | 300.0 | 100.0 | 50.0 | 300.0 | 0.0 | 0.0 | 300 | 100 | 50 | 300 | 0 | 0 | 255 | 0 | 255 | 300 | 100 | 50 | 0 | 0 | 1.00 | 0.00 | 1.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| gainsboro | rgb:[220,220,220], hsl:[ 0.0, 0.0, 86.3], hwb:[ 0.0, 86.3, 13.7] | rgb(220 220 220) | hsl(0 0% 86.3%) | hwb(0 86.3% 13.7%) | 220 | 220 | 220 | 0.0 | 0.0 | 86.3 | 0.0 | 86.3 | 13.7 | 0 | 0 | 86.3 | 0 | 86.3 | 13.7 | 220 | 220 | 220 | 0 | 0 | 86 | 86 | 14 | 0.86 | 0.86 | 0.86 | 0.86 | 0.86 | 0.00 | 1.73 | |
| ghostwhite | rgb:[248,248,255], hsl:[240.0,100.0, 98.6], hwb:[240.0, 97.3, 0.0] | rgb(248 248 255) | hsl(240 100% 98.6%) | hwb(240 97.3% 0%) | 248 | 248 | 255 | 240.0 | 100.0 | 98.6 | 240.0 | 97.3 | 0.0 | 240 | 100 | 98.6 | 240 | 97.3 | 0 | 248 | 248 | 255 | 240 | 100 | 99 | 97 | 0 | 0.97 | 0.97 | 1.00 | 0.97 | 1.00 | 0.03 | 1.97 | |
| gold | rgb:[255,215, 0], hsl:[ 50.6,100.0, 50.0], hwb:[ 50.6, 0.0, 0.0] | rgb(255 215 0) | hsl(50.6 100% 50%) | hwb(50.6 0% 0%) | 255 | 215 | 0 | 50.6 | 100.0 | 50.0 | 50.6 | 0.0 | 0.0 | 50.6 | 100 | 50 | 50.6 | 0 | 0 | 255 | 215 | 0 | 51 | 100 | 50 | 0 | 0 | 1.00 | 0.84 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| goldenrod | rgb:[218,165, 32], hsl:[ 42.9, 74.4, 49.0], hwb:[ 42.9, 12.5, 14.5] | rgb(218 165 32) | hsl(42.9 74.4% 49%) | hwb(42.9 12.5% 14.5%) | 218 | 165 | 32 | 42.9 | 74.4 | 49.0 | 42.9 | 12.5 | 14.5 | 42.9 | 74.4 | 49 | 42.9 | 12.5 | 14.5 | 218 | 165 | 32 | 43 | 74 | 49 | 13 | 15 | 0.85 | 0.65 | 0.13 | 0.13 | 0.85 | 0.73 | 0.98 | |
| gray | rgb:[128,128,128], hsl:[ 0.0, 0.0, 50.2], hwb:[ 0.0, 50.2, 49.8] | rgb(128 128 128) | hsl(0 0% 50.2%) | hwb(0 50.2% 49.8%) | 128 | 128 | 128 | 0.0 | 0.0 | 50.2 | 0.0 | 50.2 | 49.8 | 0 | 0 | 50.2 | 0 | 50.2 | 49.8 | 128 | 128 | 128 | 0 | 0 | 50 | 50 | 50 | 0.50 | 0.50 | 0.50 | 0.50 | 0.50 | 0.00 | 1.00 | |
| green | rgb:[ 0,128, 0], hsl:[120.0,100.0, 25.1], hwb:[120.0, 0.0, 49.8] | rgb(0 128 0) | hsl(120 100% 25.1%) | hwb(120 0% 49.8%) | 0 | 128 | 0 | 120.0 | 100.0 | 25.1 | 120.0 | 0.0 | 49.8 | 120 | 100 | 25.1 | 120 | 0 | 49.8 | 0 | 128 | 0 | 120 | 100 | 25 | 0 | 50 | 0.00 | 0.50 | 0.00 | 0.00 | 0.50 | 0.50 | 0.50 | |
| greenyellow | rgb:[173,255, 47], hsl:[ 83.7,100.0, 59.2], hwb:[ 83.7, 18.4, 0.0] | rgb(173 255 47) | hsl(83.7 100% 59.2%) | hwb(83.7 18.4% 0%) | 173 | 255 | 47 | 83.7 | 100.0 | 59.2 | 83.7 | 18.4 | 0.0 | 83.7 | 100 | 59.2 | 83.7 | 18.4 | 0 | 173 | 255 | 47 | 84 | 100 | 59 | 18 | 0 | 0.68 | 1.00 | 0.18 | 0.18 | 1.00 | 0.82 | 1.18 | |
| grey | rgb:[128,128,128], hsl:[ 0.0, 0.0, 50.2], hwb:[ 0.0, 50.2, 49.8] | rgb(128 128 128) | hsl(0 0% 50.2%) | hwb(0 50.2% 49.8%) | 128 | 128 | 128 | 0.0 | 0.0 | 50.2 | 0.0 | 50.2 | 49.8 | 0 | 0 | 50.2 | 0 | 50.2 | 49.8 | 128 | 128 | 128 | 0 | 0 | 50 | 50 | 50 | 0.50 | 0.50 | 0.50 | 0.50 | 0.50 | 0.00 | 1.00 | |
| honeydew | rgb:[240,255,240], hsl:[120.0,100.0, 97.1], hwb:[120.0, 94.1, 0.0] | rgb(240 255 240) | hsl(120 100% 97.1%) | hwb(120 94.1% 0%) | 240 | 255 | 240 | 120.0 | 100.0 | 97.1 | 120.0 | 94.1 | 0.0 | 120 | 100 | 97.1 | 120 | 94.1 | 0 | 240 | 255 | 240 | 120 | 100 | 97 | 94 | 0 | 0.94 | 1.00 | 0.94 | 0.94 | 1.00 | 0.06 | 1.94 | |
| hotpink | rgb:[255,105,180], hsl:[330.0,100.0, 70.6], hwb:[330.0, 41.2, 0.0] | rgb(255 105 180) | hsl(330 100% 70.6%) | hwb(330 41.2% 0%) | 255 | 105 | 180 | 330.0 | 100.0 | 70.6 | 330.0 | 41.2 | 0.0 | 330 | 100 | 70.6 | 330 | 41.2 | 0 | 255 | 105 | 180 | 330 | 100 | 71 | 41 | 0 | 1.00 | 0.41 | 0.71 | 0.41 | 1.00 | 0.59 | 1.41 | |
| indianred | rgb:[205, 92, 92], hsl:[ 0.0, 53.1, 58.2], hwb:[ 0.0, 36.1, 19.6] | rgb(205 92 92) | hsl(0 53.1% 58.2%) | hwb(0 36.1% 19.6%) | 205 | 92 | 92 | 0.0 | 53.1 | 58.2 | 0.0 | 36.1 | 19.6 | 0 | 53.1 | 58.2 | 0 | 36.1 | 19.6 | 205 | 92 | 92 | 0 | 53 | 58 | 36 | 20 | 0.80 | 0.36 | 0.36 | 0.36 | 0.80 | 0.44 | 1.16 | |
| indigo | rgb:[ 75, 0,130], hsl:[274.6,100.0, 25.5], hwb:[274.6, 0.0, 49.0] | rgb(75 0 130) | hsl(274.6 100% 25.5%) | hwb(274.6 0% 49%) | 75 | 0 | 130 | 274.6 | 100.0 | 25.5 | 274.6 | 0.0 | 49.0 | 274.6 | 100 | 25.5 | 274.6 | 0 | 49 | 75 | 0 | 130 | 275 | 100 | 25 | 0 | 49 | 0.29 | 0.00 | 0.51 | 0.00 | 0.51 | 0.51 | 0.51 | |
| ivory | rgb:[255,255,240], hsl:[ 60.0,100.0, 97.1], hwb:[ 60.0, 94.1, 0.0] | rgb(255 255 240) | hsl(60 100% 97.1%) | hwb(60 94.1% 0%) | 255 | 255 | 240 | 60.0 | 100.0 | 97.1 | 60.0 | 94.1 | 0.0 | 60 | 100 | 97.1 | 60 | 94.1 | 0 | 255 | 255 | 240 | 60 | 100 | 97 | 94 | 0 | 1.00 | 1.00 | 0.94 | 0.94 | 1.00 | 0.06 | 1.94 | |
| khaki | rgb:[240,230,140], hsl:[ 54.0, 76.9, 74.5], hwb:[ 54.0, 54.9, 5.9] | rgb(240 230 140) | hsl(54 76.9% 74.5%) | hwb(54 54.9% 5.9%) | 240 | 230 | 140 | 54.0 | 76.9 | 74.5 | 54.0 | 54.9 | 5.9 | 54 | 76.9 | 74.5 | 54 | 54.9 | 5.9 | 240 | 230 | 140 | 54 | 77 | 75 | 55 | 6 | 0.94 | 0.90 | 0.55 | 0.55 | 0.94 | 0.39 | 1.49 | |
| lavender | rgb:[230,230,250], hsl:[240.0, 66.7, 94.1], hwb:[240.0, 90.2, 2.0] | rgb(230 230 250) | hsl(240 66.7% 94.1%) | hwb(240 90.2% 2%) | 230 | 230 | 250 | 240.0 | 66.7 | 94.1 | 240.0 | 90.2 | 2.0 | 240 | 66.7 | 94.1 | 240 | 90.2 | 2 | 230 | 230 | 250 | 240 | 67 | 94 | 90 | 2 | 0.90 | 0.90 | 0.98 | 0.90 | 0.98 | 0.08 | 1.88 | |
| lavenderblush | rgb:[255,240,245], hsl:[340.0,100.0, 97.1], hwb:[340.0, 94.1, 0.0] | rgb(255 240 245) | hsl(340 100% 97.1%) | hwb(340 94.1% 0%) | 255 | 240 | 245 | 340.0 | 100.0 | 97.1 | 340.0 | 94.1 | 0.0 | 340 | 100 | 97.1 | 340 | 94.1 | 0 | 255 | 240 | 245 | 340 | 100 | 97 | 94 | 0 | 1.00 | 0.94 | 0.96 | 0.94 | 1.00 | 0.06 | 1.94 | |
| lawngreen | rgb:[124,252, 0], hsl:[ 90.5,100.0, 49.4], hwb:[ 90.5, 0.0, 1.2] | rgb(124 252 0) | hsl(90.5 100% 49.4%) | hwb(90.5 0% 1.2%) | 124 | 252 | 0 | 90.5 | 100.0 | 49.4 | 90.5 | 0.0 | 1.2 | 90.5 | 100 | 49.4 | 90.5 | 0 | 1.2 | 124 | 252 | 0 | 90 | 100 | 49 | 0 | 1 | 0.49 | 0.99 | 0.00 | 0.00 | 0.99 | 0.99 | 0.99 | |
| lemonchiffon | rgb:[255,250,205], hsl:[ 54.0,100.0, 90.2], hwb:[ 54.0, 80.4, 0.0] | rgb(255 250 205) | hsl(54 100% 90.2%) | hwb(54 80.4% 0%) | 255 | 250 | 205 | 54.0 | 100.0 | 90.2 | 54.0 | 80.4 | 0.0 | 54 | 100 | 90.2 | 54 | 80.4 | 0 | 255 | 250 | 205 | 54 | 100 | 90 | 80 | 0 | 1.00 | 0.98 | 0.80 | 0.80 | 1.00 | 0.20 | 1.80 | |
| lightblue | rgb:[173,216,230], hsl:[194.7, 53.3, 79.0], hwb:[194.7, 67.8, 9.8] | rgb(173 216 230) | hsl(194.7 53.3% 79%) | hwb(194.7 67.8% 9.8%) | 173 | 216 | 230 | 194.7 | 53.3 | 79.0 | 194.7 | 67.8 | 9.8 | 194.7 | 53.3 | 79 | 194.7 | 67.8 | 9.8 | 173 | 216 | 230 | 195 | 53 | 79 | 68 | 10 | 0.68 | 0.85 | 0.90 | 0.68 | 0.90 | 0.22 | 1.58 | |
| lightcoral | rgb:[240,128,128], hsl:[ 0.0, 78.9, 72.2], hwb:[ 0.0, 50.2, 5.9] | rgb(240 128 128) | hsl(0 78.9% 72.2%) | hwb(0 50.2% 5.9%) | 240 | 128 | 128 | 0.0 | 78.9 | 72.2 | 0.0 | 50.2 | 5.9 | 0 | 78.9 | 72.2 | 0 | 50.2 | 5.9 | 240 | 128 | 128 | 0 | 79 | 72 | 50 | 6 | 0.94 | 0.50 | 0.50 | 0.50 | 0.94 | 0.44 | 1.44 | |
| lightcyan | rgb:[224,255,255], hsl:[180.0,100.0, 93.9], hwb:[180.0, 87.8, 0.0] | rgb(224 255 255) | hsl(180 100% 93.9%) | hwb(180 87.8% 0%) | 224 | 255 | 255 | 180.0 | 100.0 | 93.9 | 180.0 | 87.8 | 0.0 | 180 | 100 | 93.9 | 180 | 87.8 | 0 | 224 | 255 | 255 | 180 | 100 | 94 | 88 | 0 | 0.88 | 1.00 | 1.00 | 0.88 | 1.00 | 0.12 | 1.88 | |
| lightgoldenrodyellow | rgb:[250,250,210], hsl:[ 60.0, 80.0, 90.2], hwb:[ 60.0, 82.4, 2.0] | rgb(250 250 210) | hsl(60 80% 90.2%) | hwb(60 82.4% 2%) | 250 | 250 | 210 | 60.0 | 80.0 | 90.2 | 60.0 | 82.4 | 2.0 | 60 | 80 | 90.2 | 60 | 82.4 | 2 | 250 | 250 | 210 | 60 | 80 | 90 | 82 | 2 | 0.98 | 0.98 | 0.82 | 0.82 | 0.98 | 0.16 | 1.80 | |
| lightgray | rgb:[211,211,211], hsl:[ 0.0, 0.0, 82.7], hwb:[ 0.0, 82.7, 17.3] | rgb(211 211 211) | hsl(0 0% 82.7%) | hwb(0 82.7% 17.3%) | 211 | 211 | 211 | 0.0 | 0.0 | 82.7 | 0.0 | 82.7 | 17.3 | 0 | 0 | 82.7 | 0 | 82.7 | 17.3 | 211 | 211 | 211 | 0 | 0 | 83 | 83 | 17 | 0.83 | 0.83 | 0.83 | 0.83 | 0.83 | 0.00 | 1.65 | |
| lightgreen | rgb:[144,238,144], hsl:[120.0, 73.4, 74.9], hwb:[120.0, 56.5, 6.7] | rgb(144 238 144) | hsl(120 73.4% 74.9%) | hwb(120 56.5% 6.7%) | 144 | 238 | 144 | 120.0 | 73.4 | 74.9 | 120.0 | 56.5 | 6.7 | 120 | 73.4 | 74.9 | 120 | 56.5 | 6.7 | 144 | 238 | 144 | 120 | 73 | 75 | 56 | 7 | 0.56 | 0.93 | 0.56 | 0.56 | 0.93 | 0.37 | 1.50 | |
| lightgrey | rgb:[211,211,211], hsl:[ 0.0, 0.0, 82.7], hwb:[ 0.0, 82.7, 17.3] | rgb(211 211 211) | hsl(0 0% 82.7%) | hwb(0 82.7% 17.3%) | 211 | 211 | 211 | 0.0 | 0.0 | 82.7 | 0.0 | 82.7 | 17.3 | 0 | 0 | 82.7 | 0 | 82.7 | 17.3 | 211 | 211 | 211 | 0 | 0 | 83 | 83 | 17 | 0.83 | 0.83 | 0.83 | 0.83 | 0.83 | 0.00 | 1.65 | |
| lightpink | rgb:[255,182,193], hsl:[351.0,100.0, 85.7], hwb:[351.0, 71.4, 0.0] | rgb(255 182 193) | hsl(351 100% 85.7%) | hwb(351 71.4% 0%) | 255 | 182 | 193 | 351.0 | 100.0 | 85.7 | 351.0 | 71.4 | 0.0 | 351 | 100 | 85.7 | 351 | 71.4 | 0 | 255 | 182 | 193 | 351 | 100 | 86 | 71 | 0 | 1.00 | 0.71 | 0.76 | 0.71 | 1.00 | 0.29 | 1.71 | |
| lightsalmon | rgb:[255,160,122], hsl:[ 17.1,100.0, 73.9], hwb:[ 17.1, 47.8, 0.0] | rgb(255 160 122) | hsl(17.1 100% 73.9%) | hwb(17.1 47.8% 0%) | 255 | 160 | 122 | 17.1 | 100.0 | 73.9 | 17.1 | 47.8 | 0.0 | 17.1 | 100 | 73.9 | 17.1 | 47.8 | 0 | 255 | 160 | 122 | 17 | 100 | 74 | 48 | 0 | 1.00 | 0.63 | 0.48 | 0.48 | 1.00 | 0.52 | 1.48 | |
| lightseagreen | rgb:[ 32,178,170], hsl:[176.7, 69.5, 41.2], hwb:[176.7, 12.5, 30.2] | rgb(32 178 170) | hsl(176.7 69.5% 41.2%) | hwb(176.7 12.5% 30.2%) | 32 | 178 | 170 | 176.7 | 69.5 | 41.2 | 176.7 | 12.5 | 30.2 | 176.7 | 69.5 | 41.2 | 176.7 | 12.5 | 30.2 | 32 | 178 | 170 | 177 | 70 | 41 | 13 | 30 | 0.13 | 0.70 | 0.67 | 0.13 | 0.70 | 0.57 | 0.82 | |
| lightskyblue | rgb:[135,206,250], hsl:[203.0, 92.0, 75.5], hwb:[203.0, 52.9, 2.0] | rgb(135 206 250) | hsl(203 92% 75.5%) | hwb(203 52.9% 2%) | 135 | 206 | 250 | 203.0 | 92.0 | 75.5 | 203.0 | 52.9 | 2.0 | 203 | 92 | 75.5 | 203 | 52.9 | 2 | 135 | 206 | 250 | 203 | 92 | 75 | 53 | 2 | 0.53 | 0.81 | 0.98 | 0.53 | 0.98 | 0.45 | 1.51 | |
| lightslategray | rgb:[119,136,153], hsl:[210.0, 14.3, 53.3], hwb:[210.0, 46.7, 40.0] | rgb(119 136 153) | hsl(210 14.3% 53.3%) | hwb(210 46.7% 40%) | 119 | 136 | 153 | 210.0 | 14.3 | 53.3 | 210.0 | 46.7 | 40.0 | 210 | 14.3 | 53.3 | 210 | 46.7 | 40 | 119 | 136 | 153 | 210 | 14 | 53 | 47 | 40 | 0.47 | 0.53 | 0.60 | 0.47 | 0.60 | 0.13 | 1.07 | |
| lightslategrey | rgb:[119,136,153], hsl:[210.0, 14.3, 53.3], hwb:[210.0, 46.7, 40.0] | rgb(119 136 153) | hsl(210 14.3% 53.3%) | hwb(210 46.7% 40%) | 119 | 136 | 153 | 210.0 | 14.3 | 53.3 | 210.0 | 46.7 | 40.0 | 210 | 14.3 | 53.3 | 210 | 46.7 | 40 | 119 | 136 | 153 | 210 | 14 | 53 | 47 | 40 | 0.47 | 0.53 | 0.60 | 0.47 | 0.60 | 0.13 | 1.07 | |
| lightsteelblue | rgb:[176,196,222], hsl:[213.9, 41.1, 78.0], hwb:[213.9, 69.0, 12.9] | rgb(176 196 222) | hsl(213.9 41.1% 78%) | hwb(213.9 69% 12.9%) | 176 | 196 | 222 | 213.9 | 41.1 | 78.0 | 213.9 | 69.0 | 12.9 | 213.9 | 41.1 | 78 | 213.9 | 69 | 12.9 | 176 | 196 | 222 | 214 | 41 | 78 | 69 | 13 | 0.69 | 0.77 | 0.87 | 0.69 | 0.87 | 0.18 | 1.56 | |
| lightyellow | rgb:[255,255,224], hsl:[ 60.0,100.0, 93.9], hwb:[ 60.0, 87.8, 0.0] | rgb(255 255 224) | hsl(60 100% 93.9%) | hwb(60 87.8% 0%) | 255 | 255 | 224 | 60.0 | 100.0 | 93.9 | 60.0 | 87.8 | 0.0 | 60 | 100 | 93.9 | 60 | 87.8 | 0 | 255 | 255 | 224 | 60 | 100 | 94 | 88 | 0 | 1.00 | 1.00 | 0.88 | 0.88 | 1.00 | 0.12 | 1.88 | |
| lime | rgb:[ 0,255, 0], hsl:[120.0,100.0, 50.0], hwb:[120.0, 0.0, 0.0] | rgb(0 255 0) | hsl(120 100% 50%) | hwb(120 0% 0%) | 0 | 255 | 0 | 120.0 | 100.0 | 50.0 | 120.0 | 0.0 | 0.0 | 120 | 100 | 50 | 120 | 0 | 0 | 0 | 255 | 0 | 120 | 100 | 50 | 0 | 0 | 0.00 | 1.00 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| limegreen | rgb:[ 50,205, 50], hsl:[120.0, 60.8, 50.0], hwb:[120.0, 19.6, 19.6] | rgb(50 205 50) | hsl(120 60.8% 50%) | hwb(120 19.6% 19.6%) | 50 | 205 | 50 | 120.0 | 60.8 | 50.0 | 120.0 | 19.6 | 19.6 | 120 | 60.8 | 50 | 120 | 19.6 | 19.6 | 50 | 205 | 50 | 120 | 61 | 50 | 20 | 20 | 0.20 | 0.80 | 0.20 | 0.20 | 0.80 | 0.61 | 1.00 | |
| linen | rgb:[250,240,230], hsl:[ 30.0, 66.7, 94.1], hwb:[ 30.0, 90.2, 2.0] | rgb(250 240 230) | hsl(30 66.7% 94.1%) | hwb(30 90.2% 2%) | 250 | 240 | 230 | 30.0 | 66.7 | 94.1 | 30.0 | 90.2 | 2.0 | 30 | 66.7 | 94.1 | 30 | 90.2 | 2 | 250 | 240 | 230 | 30 | 67 | 94 | 90 | 2 | 0.98 | 0.94 | 0.90 | 0.90 | 0.98 | 0.08 | 1.88 | |
| magenta | rgb:[255, 0,255], hsl:[300.0,100.0, 50.0], hwb:[300.0, 0.0, 0.0] | rgb(255 0 255) | hsl(300 100% 50%) | hwb(300 0% 0%) | 255 | 0 | 255 | 300.0 | 100.0 | 50.0 | 300.0 | 0.0 | 0.0 | 300 | 100 | 50 | 300 | 0 | 0 | 255 | 0 | 255 | 300 | 100 | 50 | 0 | 0 | 1.00 | 0.00 | 1.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| maroon | rgb:[128, 0, 0], hsl:[ 0.0,100.0, 25.1], hwb:[ 0.0, 0.0, 49.8] | rgb(128 0 0) | hsl(0 100% 25.1%) | hwb(0 0% 49.8%) | 128 | 0 | 0 | 0.0 | 100.0 | 25.1 | 0.0 | 0.0 | 49.8 | 0 | 100 | 25.1 | 0 | 0 | 49.8 | 128 | 0 | 0 | 0 | 100 | 25 | 0 | 50 | 0.50 | 0.00 | 0.00 | 0.00 | 0.50 | 0.50 | 0.50 | |
| mediumaquamarine | rgb:[102,205,170], hsl:[159.6, 50.7, 60.2], hwb:[159.6, 40.0, 19.6] | rgb(102 205 170) | hsl(159.6 50.7% 60.2%) | hwb(159.6 40% 19.6%) | 102 | 205 | 170 | 159.6 | 50.7 | 60.2 | 159.6 | 40.0 | 19.6 | 159.6 | 50.7 | 60.2 | 159.6 | 40 | 19.6 | 102 | 205 | 170 | 160 | 51 | 60 | 40 | 20 | 0.40 | 0.80 | 0.67 | 0.40 | 0.80 | 0.40 | 1.20 | |
| mediumblue | rgb:[ 0, 0,205], hsl:[240.0,100.0, 40.2], hwb:[240.0, 0.0, 19.6] | rgb(0 0 205) | hsl(240 100% 40.2%) | hwb(240 0% 19.6%) | 0 | 0 | 205 | 240.0 | 100.0 | 40.2 | 240.0 | 0.0 | 19.6 | 240 | 100 | 40.2 | 240 | 0 | 19.6 | 0 | 0 | 205 | 240 | 100 | 40 | 0 | 20 | 0.00 | 0.00 | 0.80 | 0.00 | 0.80 | 0.80 | 0.80 | |
| mediumorchid | rgb:[186, 85,211], hsl:[288.1, 58.9, 58.0], hwb:[288.1, 33.3, 17.3] | rgb(186 85 211) | hsl(288.1 58.9% 58%) | hwb(288.1 33.3% 17.3%) | 186 | 85 | 211 | 288.1 | 58.9 | 58.0 | 288.1 | 33.3 | 17.3 | 288.1 | 58.9 | 58 | 288.1 | 33.3 | 17.3 | 186 | 85 | 211 | 288 | 59 | 58 | 33 | 17 | 0.73 | 0.33 | 0.83 | 0.33 | 0.83 | 0.49 | 1.16 | |
| mediumpurple | rgb:[147,112,219], hsl:[259.6, 59.8, 64.9], hwb:[259.6, 43.9, 14.1] | rgb(147 112 219) | hsl(259.6 59.8% 64.9%) | hwb(259.6 43.9% 14.1%) | 147 | 112 | 219 | 259.6 | 59.8 | 64.9 | 259.6 | 43.9 | 14.1 | 259.6 | 59.8 | 64.9 | 259.6 | 43.9 | 14.1 | 147 | 112 | 219 | 260 | 60 | 65 | 44 | 14 | 0.58 | 0.44 | 0.86 | 0.44 | 0.86 | 0.42 | 1.30 | |
| mediumseagreen | rgb:[ 60,179,113], hsl:[146.7, 49.8, 46.9], hwb:[146.7, 23.5, 29.8] | rgb(60 179 113) | hsl(146.7 49.8% 46.9%) | hwb(146.7 23.5% 29.8%) | 60 | 179 | 113 | 146.7 | 49.8 | 46.9 | 146.7 | 23.5 | 29.8 | 146.7 | 49.8 | 46.9 | 146.7 | 23.5 | 29.8 | 60 | 179 | 113 | 147 | 50 | 47 | 24 | 30 | 0.24 | 0.70 | 0.44 | 0.24 | 0.70 | 0.47 | 0.94 | |
| mediumslateblue | rgb:[123,104,238], hsl:[248.5, 79.8, 67.1], hwb:[248.5, 40.8, 6.7] | rgb(123 104 238) | hsl(248.5 79.8% 67.1%) | hwb(248.5 40.8% 6.7%) | 123 | 104 | 238 | 248.5 | 79.8 | 67.1 | 248.5 | 40.8 | 6.7 | 248.5 | 79.8 | 67.1 | 248.5 | 40.8 | 6.7 | 123 | 104 | 238 | 249 | 80 | 67 | 41 | 7 | 0.48 | 0.41 | 0.93 | 0.41 | 0.93 | 0.53 | 1.34 | |
| mediumspringgreen | rgb:[ 0,250,154], hsl:[157.0,100.0, 49.0], hwb:[157.0, 0.0, 2.0] | rgb(0 250 154) | hsl(157 100% 49%) | hwb(157 0% 2%) | 0 | 250 | 154 | 157.0 | 100.0 | 49.0 | 157.0 | 0.0 | 2.0 | 157 | 100 | 49 | 157 | 0 | 2 | 0 | 250 | 154 | 157 | 100 | 49 | 0 | 2 | 0.00 | 0.98 | 0.60 | 0.00 | 0.98 | 0.98 | 0.98 | |
| mediumturquoise | rgb:[ 72,209,204], hsl:[177.8, 59.8, 55.1], hwb:[177.8, 28.2, 18.0] | rgb(72 209 204) | hsl(177.8 59.8% 55.1%) | hwb(177.8 28.2% 18%) | 72 | 209 | 204 | 177.8 | 59.8 | 55.1 | 177.8 | 28.2 | 18.0 | 177.8 | 59.8 | 55.1 | 177.8 | 28.2 | 18 | 72 | 209 | 204 | 178 | 60 | 55 | 28 | 18 | 0.28 | 0.82 | 0.80 | 0.28 | 0.82 | 0.54 | 1.10 | |
| mediumvioletred | rgb:[199, 21,133], hsl:[322.2, 80.9, 43.1], hwb:[322.2, 8.2, 22.0] | rgb(199 21 133) | hsl(322.2 80.9% 43.1%) | hwb(322.2 8.2% 22%) | 199 | 21 | 133 | 322.2 | 80.9 | 43.1 | 322.2 | 8.2 | 22.0 | 322.2 | 80.9 | 43.1 | 322.2 | 8.2 | 22 | 199 | 21 | 133 | 322 | 81 | 43 | 8 | 22 | 0.78 | 0.08 | 0.52 | 0.08 | 0.78 | 0.70 | 0.86 | |
| midnightblue | rgb:[ 25, 25,112], hsl:[240.0, 63.5, 26.9], hwb:[240.0, 9.8, 56.1] | rgb(25 25 112) | hsl(240 63.5% 26.9%) | hwb(240 9.8% 56.1%) | 25 | 25 | 112 | 240.0 | 63.5 | 26.9 | 240.0 | 9.8 | 56.1 | 240 | 63.5 | 26.9 | 240 | 9.8 | 56.1 | 25 | 25 | 112 | 240 | 64 | 27 | 10 | 56 | 0.10 | 0.10 | 0.44 | 0.10 | 0.44 | 0.34 | 0.54 | |
| mintcream | rgb:[245,255,250], hsl:[150.0,100.0, 98.0], hwb:[150.0, 96.1, 0.0] | rgb(245 255 250) | hsl(150 100% 98%) | hwb(150 96.1% 0%) | 245 | 255 | 250 | 150.0 | 100.0 | 98.0 | 150.0 | 96.1 | 0.0 | 150 | 100 | 98 | 150 | 96.1 | 0 | 245 | 255 | 250 | 150 | 100 | 98 | 96 | 0 | 0.96 | 1.00 | 0.98 | 0.96 | 1.00 | 0.04 | 1.96 | |
| mistyrose | rgb:[255,228,225], hsl:[ 6.0,100.0, 94.1], hwb:[ 6.0, 88.2, 0.0] | rgb(255 228 225) | hsl(6 100% 94.1%) | hwb(6 88.2% 0%) | 255 | 228 | 225 | 6.0 | 100.0 | 94.1 | 6.0 | 88.2 | 0.0 | 6 | 100 | 94.1 | 6 | 88.2 | 0 | 255 | 228 | 225 | 6 | 100 | 94 | 88 | 0 | 1.00 | 0.89 | 0.88 | 0.88 | 1.00 | 0.12 | 1.88 | |
| moccasin | rgb:[255,228,181], hsl:[ 38.1,100.0, 85.5], hwb:[ 38.1, 71.0, 0.0] | rgb(255 228 181) | hsl(38.1 100% 85.5%) | hwb(38.1 71% 0%) | 255 | 228 | 181 | 38.1 | 100.0 | 85.5 | 38.1 | 71.0 | 0.0 | 38.1 | 100 | 85.5 | 38.1 | 71 | 0 | 255 | 228 | 181 | 38 | 100 | 85 | 71 | 0 | 1.00 | 0.89 | 0.71 | 0.71 | 1.00 | 0.29 | 1.71 | |
| navajowhite | rgb:[255,222,173], hsl:[ 35.9,100.0, 83.9], hwb:[ 35.9, 67.8, 0.0] | rgb(255 222 173) | hsl(35.9 100% 83.9%) | hwb(35.9 67.8% 0%) | 255 | 222 | 173 | 35.9 | 100.0 | 83.9 | 35.9 | 67.8 | 0.0 | 35.9 | 100 | 83.9 | 35.9 | 67.8 | 0 | 255 | 222 | 173 | 36 | 100 | 84 | 68 | 0 | 1.00 | 0.87 | 0.68 | 0.68 | 1.00 | 0.32 | 1.68 | |
| navy | rgb:[ 0, 0,128], hsl:[240.0,100.0, 25.1], hwb:[240.0, 0.0, 49.8] | rgb(0 0 128) | hsl(240 100% 25.1%) | hwb(240 0% 49.8%) | 0 | 0 | 128 | 240.0 | 100.0 | 25.1 | 240.0 | 0.0 | 49.8 | 240 | 100 | 25.1 | 240 | 0 | 49.8 | 0 | 0 | 128 | 240 | 100 | 25 | 0 | 50 | 0.00 | 0.00 | 0.50 | 0.00 | 0.50 | 0.50 | 0.50 | |
| oldlace | rgb:[253,245,230], hsl:[ 39.1, 85.2, 94.7], hwb:[ 39.1, 90.2, 0.8] | rgb(253 245 230) | hsl(39.1 85.2% 94.7%) | hwb(39.1 90.2% 0.8%) | 253 | 245 | 230 | 39.1 | 85.2 | 94.7 | 39.1 | 90.2 | 0.8 | 39.1 | 85.2 | 94.7 | 39.1 | 90.2 | 0.8 | 253 | 245 | 230 | 39 | 85 | 95 | 90 | 1 | 0.99 | 0.96 | 0.90 | 0.90 | 0.99 | 0.09 | 1.89 | |
| olive | rgb:[128,128, 0], hsl:[ 60.0,100.0, 25.1], hwb:[ 60.0, 0.0, 49.8] | rgb(128 128 0) | hsl(60 100% 25.1%) | hwb(60 0% 49.8%) | 128 | 128 | 0 | 60.0 | 100.0 | 25.1 | 60.0 | 0.0 | 49.8 | 60 | 100 | 25.1 | 60 | 0 | 49.8 | 128 | 128 | 0 | 60 | 100 | 25 | 0 | 50 | 0.50 | 0.50 | 0.00 | 0.00 | 0.50 | 0.50 | 0.50 | |
| olivedrab | rgb:[107,142, 35], hsl:[ 79.6, 60.5, 34.7], hwb:[ 79.6, 13.7, 44.3] | rgb(107 142 35) | hsl(79.6 60.5% 34.7%) | hwb(79.6 13.7% 44.3%) | 107 | 142 | 35 | 79.6 | 60.5 | 34.7 | 79.6 | 13.7 | 44.3 | 79.6 | 60.5 | 34.7 | 79.6 | 13.7 | 44.3 | 107 | 142 | 35 | 80 | 60 | 35 | 14 | 44 | 0.42 | 0.56 | 0.14 | 0.14 | 0.56 | 0.42 | 0.69 | |
| orange | rgb:[255,165, 0], hsl:[ 38.8,100.0, 50.0], hwb:[ 38.8, 0.0, 0.0] | rgb(255 165 0) | hsl(38.8 100% 50%) | hwb(38.8 0% 0%) | 255 | 165 | 0 | 38.8 | 100.0 | 50.0 | 38.8 | 0.0 | 0.0 | 38.8 | 100 | 50 | 38.8 | 0 | 0 | 255 | 165 | 0 | 39 | 100 | 50 | 0 | 0 | 1.00 | 0.65 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| orangered | rgb:[255, 69, 0], hsl:[ 16.2,100.0, 50.0], hwb:[ 16.2, 0.0, 0.0] | rgb(255 69 0) | hsl(16.2 100% 50%) | hwb(16.2 0% 0%) | 255 | 69 | 0 | 16.2 | 100.0 | 50.0 | 16.2 | 0.0 | 0.0 | 16.2 | 100 | 50 | 16.2 | 0 | 0 | 255 | 69 | 0 | 16 | 100 | 50 | 0 | 0 | 1.00 | 0.27 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| orchid | rgb:[218,112,214], hsl:[302.3, 58.9, 64.7], hwb:[302.3, 43.9, 14.5] | rgb(218 112 214) | hsl(302.3 58.9% 64.7%) | hwb(302.3 43.9% 14.5%) | 218 | 112 | 214 | 302.3 | 58.9 | 64.7 | 302.3 | 43.9 | 14.5 | 302.3 | 58.9 | 64.7 | 302.3 | 43.9 | 14.5 | 218 | 112 | 214 | 302 | 59 | 65 | 44 | 15 | 0.85 | 0.44 | 0.84 | 0.44 | 0.85 | 0.42 | 1.29 | |
| palegoldenrod | rgb:[238,232,170], hsl:[ 54.7, 66.7, 80.0], hwb:[ 54.7, 66.7, 6.7] | rgb(238 232 170) | hsl(54.7 66.7% 80%) | hwb(54.7 66.7% 6.7%) | 238 | 232 | 170 | 54.7 | 66.7 | 80.0 | 54.7 | 66.7 | 6.7 | 54.7 | 66.7 | 80 | 54.7 | 66.7 | 6.7 | 238 | 232 | 170 | 55 | 67 | 80 | 67 | 7 | 0.93 | 0.91 | 0.67 | 0.67 | 0.93 | 0.27 | 1.60 | |
| palegreen | rgb:[152,251,152], hsl:[120.0, 92.5, 79.0], hwb:[120.0, 59.6, 1.6] | rgb(152 251 152) | hsl(120 92.5% 79%) | hwb(120 59.6% 1.6%) | 152 | 251 | 152 | 120.0 | 92.5 | 79.0 | 120.0 | 59.6 | 1.6 | 120 | 92.5 | 79 | 120 | 59.6 | 1.6 | 152 | 251 | 152 | 120 | 93 | 79 | 60 | 2 | 0.60 | 0.98 | 0.60 | 0.60 | 0.98 | 0.39 | 1.58 | |
| paleturquoise | rgb:[175,238,238], hsl:[180.0, 64.9, 81.0], hwb:[180.0, 68.6, 6.7] | rgb(175 238 238) | hsl(180 64.9% 81%) | hwb(180 68.6% 6.7%) | 175 | 238 | 238 | 180.0 | 64.9 | 81.0 | 180.0 | 68.6 | 6.7 | 180 | 64.9 | 81 | 180 | 68.6 | 6.7 | 175 | 238 | 238 | 180 | 65 | 81 | 69 | 7 | 0.69 | 0.93 | 0.93 | 0.69 | 0.93 | 0.25 | 1.62 | |
| palevioletred | rgb:[219,112,147], hsl:[340.4, 59.8, 64.9], hwb:[340.4, 43.9, 14.1] | rgb(219 112 147) | hsl(340.4 59.8% 64.9%) | hwb(340.4 43.9% 14.1%) | 219 | 112 | 147 | 340.4 | 59.8 | 64.9 | 340.4 | 43.9 | 14.1 | 340.4 | 59.8 | 64.9 | 340.4 | 43.9 | 14.1 | 219 | 112 | 147 | 340 | 60 | 65 | 44 | 14 | 0.86 | 0.44 | 0.58 | 0.44 | 0.86 | 0.42 | 1.30 | |
| papayawhip | rgb:[255,239,213], hsl:[ 37.1,100.0, 91.8], hwb:[ 37.1, 83.5, 0.0] | rgb(255 239 213) | hsl(37.1 100% 91.8%) | hwb(37.1 83.5% 0%) | 255 | 239 | 213 | 37.1 | 100.0 | 91.8 | 37.1 | 83.5 | 0.0 | 37.1 | 100 | 91.8 | 37.1 | 83.5 | 0 | 255 | 239 | 213 | 37 | 100 | 92 | 84 | 0 | 1.00 | 0.94 | 0.84 | 0.84 | 1.00 | 0.16 | 1.84 | |
| peachpuff | rgb:[255,218,185], hsl:[ 28.3,100.0, 86.3], hwb:[ 28.3, 72.5, 0.0] | rgb(255 218 185) | hsl(28.3 100% 86.3%) | hwb(28.3 72.5% 0%) | 255 | 218 | 185 | 28.3 | 100.0 | 86.3 | 28.3 | 72.5 | 0.0 | 28.3 | 100 | 86.3 | 28.3 | 72.5 | 0 | 255 | 218 | 185 | 28 | 100 | 86 | 73 | 0 | 1.00 | 0.85 | 0.73 | 0.73 | 1.00 | 0.27 | 1.73 | |
| peru | rgb:[205,133, 63], hsl:[ 29.6, 58.7, 52.5], hwb:[ 29.6, 24.7, 19.6] | rgb(205 133 63) | hsl(29.6 58.7% 52.5%) | hwb(29.6 24.7% 19.6%) | 205 | 133 | 63 | 29.6 | 58.7 | 52.5 | 29.6 | 24.7 | 19.6 | 29.6 | 58.7 | 52.5 | 29.6 | 24.7 | 19.6 | 205 | 133 | 63 | 30 | 59 | 53 | 25 | 20 | 0.80 | 0.52 | 0.25 | 0.25 | 0.80 | 0.56 | 1.05 | |
| pink | rgb:[255,192,203], hsl:[349.5,100.0, 87.6], hwb:[349.5, 75.3, 0.0] | rgb(255 192 203) | hsl(349.5 100% 87.6%) | hwb(349.5 75.3% 0%) | 255 | 192 | 203 | 349.5 | 100.0 | 87.6 | 349.5 | 75.3 | 0.0 | 349.5 | 100 | 87.6 | 349.5 | 75.3 | 0 | 255 | 192 | 203 | 350 | 100 | 88 | 75 | 0 | 1.00 | 0.75 | 0.80 | 0.75 | 1.00 | 0.25 | 1.75 | |
| plum | rgb:[221,160,221], hsl:[300.0, 47.3, 74.7], hwb:[300.0, 62.7, 13.3] | rgb(221 160 221) | hsl(300 47.3% 74.7%) | hwb(300 62.7% 13.3%) | 221 | 160 | 221 | 300.0 | 47.3 | 74.7 | 300.0 | 62.7 | 13.3 | 300 | 47.3 | 74.7 | 300 | 62.7 | 13.3 | 221 | 160 | 221 | 300 | 47 | 75 | 63 | 13 | 0.87 | 0.63 | 0.87 | 0.63 | 0.87 | 0.24 | 1.49 | |
| powderblue | rgb:[176,224,230], hsl:[186.7, 51.9, 79.6], hwb:[186.7, 69.0, 9.8] | rgb(176 224 230) | hsl(186.7 51.9% 79.6%) | hwb(186.7 69% 9.8%) | 176 | 224 | 230 | 186.7 | 51.9 | 79.6 | 186.7 | 69.0 | 9.8 | 186.7 | 51.9 | 79.6 | 186.7 | 69 | 9.8 | 176 | 224 | 230 | 187 | 52 | 80 | 69 | 10 | 0.69 | 0.88 | 0.90 | 0.69 | 0.90 | 0.21 | 1.59 | |
| purple | rgb:[128, 0,128], hsl:[300.0,100.0, 25.1], hwb:[300.0, 0.0, 49.8] | rgb(128 0 128) | hsl(300 100% 25.1%) | hwb(300 0% 49.8%) | 128 | 0 | 128 | 300.0 | 100.0 | 25.1 | 300.0 | 0.0 | 49.8 | 300 | 100 | 25.1 | 300 | 0 | 49.8 | 128 | 0 | 128 | 300 | 100 | 25 | 0 | 50 | 0.50 | 0.00 | 0.50 | 0.00 | 0.50 | 0.50 | 0.50 | |
| rebeccapurple | rgb:[102, 51,153], hsl:[270.0, 50.0, 40.0], hwb:[270.0, 20.0, 40.0] | rgb(102 51 153) | hsl(270 50% 40%) | hwb(270 20% 40%) | 102 | 51 | 153 | 270.0 | 50.0 | 40.0 | 270.0 | 20.0 | 40.0 | 270 | 50 | 40 | 270 | 20 | 40 | 102 | 51 | 153 | 270 | 50 | 40 | 20 | 40 | 0.40 | 0.20 | 0.60 | 0.20 | 0.60 | 0.40 | 0.80 | |
| red | rgb:[255, 0, 0], hsl:[ 0.0,100.0, 50.0], hwb:[ 0.0, 0.0, 0.0] | rgb(255 0 0) | hsl(0 100% 50%) | hwb(0 0% 0%) | 255 | 0 | 0 | 0.0 | 100.0 | 50.0 | 0.0 | 0.0 | 0.0 | 0 | 100 | 50 | 0 | 0 | 0 | 255 | 0 | 0 | 0 | 100 | 50 | 0 | 0 | 1.00 | 0.00 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| rosybrown | rgb:[188,143,143], hsl:[ 0.0, 25.1, 64.9], hwb:[ 0.0, 56.1, 26.3] | rgb(188 143 143) | hsl(0 25.1% 64.9%) | hwb(0 56.1% 26.3%) | 188 | 143 | 143 | 0.0 | 25.1 | 64.9 | 0.0 | 56.1 | 26.3 | 0 | 25.1 | 64.9 | 0 | 56.1 | 26.3 | 188 | 143 | 143 | 0 | 25 | 65 | 56 | 26 | 0.74 | 0.56 | 0.56 | 0.56 | 0.74 | 0.18 | 1.30 | |
| royalblue | rgb:[ 65,105,225], hsl:[225.0, 72.7, 56.9], hwb:[225.0, 25.5, 11.8] | rgb(65 105 225) | hsl(225 72.7% 56.9%) | hwb(225 25.5% 11.8%) | 65 | 105 | 225 | 225.0 | 72.7 | 56.9 | 225.0 | 25.5 | 11.8 | 225 | 72.7 | 56.9 | 225 | 25.5 | 11.8 | 65 | 105 | 225 | 225 | 73 | 57 | 25 | 12 | 0.25 | 0.41 | 0.88 | 0.25 | 0.88 | 0.63 | 1.14 | |
| saddlebrown | rgb:[139, 69, 19], hsl:[ 25.0, 75.9, 31.0], hwb:[ 25.0, 7.5, 45.5] | rgb(139 69 19) | hsl(25 75.9% 31%) | hwb(25 7.5% 45.5%) | 139 | 69 | 19 | 25.0 | 75.9 | 31.0 | 25.0 | 7.5 | 45.5 | 25 | 75.9 | 31 | 25 | 7.5 | 45.5 | 139 | 69 | 19 | 25 | 76 | 31 | 7 | 45 | 0.55 | 0.27 | 0.07 | 0.07 | 0.55 | 0.47 | 0.62 | |
| salmon | rgb:[250,128,114], hsl:[ 6.2, 93.2, 71.4], hwb:[ 6.2, 44.7, 2.0] | rgb(250 128 114) | hsl(6.2 93.2% 71.4%) | hwb(6.2 44.7% 2%) | 250 | 128 | 114 | 6.2 | 93.2 | 71.4 | 6.2 | 44.7 | 2.0 | 6.2 | 93.2 | 71.4 | 6.2 | 44.7 | 2 | 250 | 128 | 114 | 6 | 93 | 71 | 45 | 2 | 0.98 | 0.50 | 0.45 | 0.45 | 0.98 | 0.53 | 1.43 | |
| sandybrown | rgb:[244,164, 96], hsl:[ 27.6, 87.1, 66.7], hwb:[ 27.6, 37.6, 4.3] | rgb(244 164 96) | hsl(27.6 87.1% 66.7%) | hwb(27.6 37.6% 4.3%) | 244 | 164 | 96 | 27.6 | 87.1 | 66.7 | 27.6 | 37.6 | 4.3 | 27.6 | 87.1 | 66.7 | 27.6 | 37.6 | 4.3 | 244 | 164 | 96 | 28 | 87 | 67 | 38 | 4 | 0.96 | 0.64 | 0.38 | 0.38 | 0.96 | 0.58 | 1.33 | |
| seagreen | rgb:[ 46,139, 87], hsl:[146.5, 50.3, 36.3], hwb:[146.5, 18.0, 45.5] | rgb(46 139 87) | hsl(146.5 50.3% 36.3%) | hwb(146.5 18% 45.5%) | 46 | 139 | 87 | 146.5 | 50.3 | 36.3 | 146.5 | 18.0 | 45.5 | 146.5 | 50.3 | 36.3 | 146.5 | 18 | 45.5 | 46 | 139 | 87 | 146 | 50 | 36 | 18 | 45 | 0.18 | 0.55 | 0.34 | 0.18 | 0.55 | 0.36 | 0.73 | |
| seashell | rgb:[255,245,238], hsl:[ 24.7,100.0, 96.7], hwb:[ 24.7, 93.3, 0.0] | rgb(255 245 238) | hsl(24.7 100% 96.7%) | hwb(24.7 93.3% 0%) | 255 | 245 | 238 | 24.7 | 100.0 | 96.7 | 24.7 | 93.3 | 0.0 | 24.7 | 100 | 96.7 | 24.7 | 93.3 | 0 | 255 | 245 | 238 | 25 | 100 | 97 | 93 | 0 | 1.00 | 0.96 | 0.93 | 0.93 | 1.00 | 0.07 | 1.93 | |
| sienna | rgb:[160, 82, 45], hsl:[ 19.3, 56.1, 40.2], hwb:[ 19.3, 17.6, 37.3] | rgb(160 82 45) | hsl(19.3 56.1% 40.2%) | hwb(19.3 17.6% 37.3%) | 160 | 82 | 45 | 19.3 | 56.1 | 40.2 | 19.3 | 17.6 | 37.3 | 19.3 | 56.1 | 40.2 | 19.3 | 17.6 | 37.3 | 160 | 82 | 45 | 19 | 56 | 40 | 18 | 37 | 0.63 | 0.32 | 0.18 | 0.18 | 0.63 | 0.45 | 0.80 | |
| silver | rgb:[192,192,192], hsl:[ 0.0, 0.0, 75.3], hwb:[ 0.0, 75.3, 24.7] | rgb(192 192 192) | hsl(0 0% 75.3%) | hwb(0 75.3% 24.7%) | 192 | 192 | 192 | 0.0 | 0.0 | 75.3 | 0.0 | 75.3 | 24.7 | 0 | 0 | 75.3 | 0 | 75.3 | 24.7 | 192 | 192 | 192 | 0 | 0 | 75 | 75 | 25 | 0.75 | 0.75 | 0.75 | 0.75 | 0.75 | 0.00 | 1.51 | |
| skyblue | rgb:[135,206,235], hsl:[197.4, 71.4, 72.5], hwb:[197.4, 52.9, 7.8] | rgb(135 206 235) | hsl(197.4 71.4% 72.5%) | hwb(197.4 52.9% 7.8%) | 135 | 206 | 235 | 197.4 | 71.4 | 72.5 | 197.4 | 52.9 | 7.8 | 197.4 | 71.4 | 72.5 | 197.4 | 52.9 | 7.8 | 135 | 206 | 235 | 197 | 71 | 73 | 53 | 8 | 0.53 | 0.81 | 0.92 | 0.53 | 0.92 | 0.39 | 1.45 | |
| slateblue | rgb:[106, 90,205], hsl:[248.3, 53.5, 57.8], hwb:[248.3, 35.3, 19.6] | rgb(106 90 205) | hsl(248.3 53.5% 57.8%) | hwb(248.3 35.3% 19.6%) | 106 | 90 | 205 | 248.3 | 53.5 | 57.8 | 248.3 | 35.3 | 19.6 | 248.3 | 53.5 | 57.8 | 248.3 | 35.3 | 19.6 | 106 | 90 | 205 | 248 | 53 | 58 | 35 | 20 | 0.42 | 0.35 | 0.80 | 0.35 | 0.80 | 0.45 | 1.16 | |
| slategray | rgb:[112,128,144], hsl:[210.0, 12.6, 50.2], hwb:[210.0, 43.9, 43.5] | rgb(112 128 144) | hsl(210 12.6% 50.2%) | hwb(210 43.9% 43.5%) | 112 | 128 | 144 | 210.0 | 12.6 | 50.2 | 210.0 | 43.9 | 43.5 | 210 | 12.6 | 50.2 | 210 | 43.9 | 43.5 | 112 | 128 | 144 | 210 | 13 | 50 | 44 | 44 | 0.44 | 0.50 | 0.56 | 0.44 | 0.56 | 0.13 | 1.00 | |
| slategrey | rgb:[112,128,144], hsl:[210.0, 12.6, 50.2], hwb:[210.0, 43.9, 43.5] | rgb(112 128 144) | hsl(210 12.6% 50.2%) | hwb(210 43.9% 43.5%) | 112 | 128 | 144 | 210.0 | 12.6 | 50.2 | 210.0 | 43.9 | 43.5 | 210 | 12.6 | 50.2 | 210 | 43.9 | 43.5 | 112 | 128 | 144 | 210 | 13 | 50 | 44 | 44 | 0.44 | 0.50 | 0.56 | 0.44 | 0.56 | 0.13 | 1.00 | |
| snow | rgb:[255,250,250], hsl:[ 0.0,100.0, 99.0], hwb:[ 0.0, 98.0, 0.0] | rgb(255 250 250) | hsl(0 100% 99%) | hwb(0 98% 0%) | 255 | 250 | 250 | 0.0 | 100.0 | 99.0 | 0.0 | 98.0 | 0.0 | 0 | 100 | 99 | 0 | 98 | 0 | 255 | 250 | 250 | 0 | 100 | 99 | 98 | 0 | 1.00 | 0.98 | 0.98 | 0.98 | 1.00 | 0.02 | 1.98 | |
| springgreen | rgb:[ 0,255,127], hsl:[149.9,100.0, 50.0], hwb:[149.9, 0.0, 0.0] | rgb(0 255 127) | hsl(149.9 100% 50%) | hwb(149.9 0% 0%) | 0 | 255 | 127 | 149.9 | 100.0 | 50.0 | 149.9 | 0.0 | 0.0 | 149.9 | 100 | 50 | 149.9 | 0 | 0 | 0 | 255 | 127 | 150 | 100 | 50 | 0 | 0 | 0.00 | 1.00 | 0.50 | 0.00 | 1.00 | 1.00 | 1.00 | |
| steelblue | rgb:[ 70,130,180], hsl:[207.3, 44.0, 49.0], hwb:[207.3, 27.5, 29.4] | rgb(70 130 180) | hsl(207.3 44% 49%) | hwb(207.3 27.5% 29.4%) | 70 | 130 | 180 | 207.3 | 44.0 | 49.0 | 207.3 | 27.5 | 29.4 | 207.3 | 44 | 49 | 207.3 | 27.5 | 29.4 | 70 | 130 | 180 | 207 | 44 | 49 | 27 | 29 | 0.27 | 0.51 | 0.71 | 0.27 | 0.71 | 0.43 | 0.98 | |
| tan | rgb:[210,180,140], hsl:[ 34.3, 43.8, 68.6], hwb:[ 34.3, 54.9, 17.6] | rgb(210 180 140) | hsl(34.3 43.8% 68.6%) | hwb(34.3 54.9% 17.6%) | 210 | 180 | 140 | 34.3 | 43.8 | 68.6 | 34.3 | 54.9 | 17.6 | 34.3 | 43.8 | 68.6 | 34.3 | 54.9 | 17.6 | 210 | 180 | 140 | 34 | 44 | 69 | 55 | 18 | 0.82 | 0.71 | 0.55 | 0.55 | 0.82 | 0.27 | 1.37 | |
| teal | rgb:[ 0,128,128], hsl:[180.0,100.0, 25.1], hwb:[180.0, 0.0, 49.8] | rgb(0 128 128) | hsl(180 100% 25.1%) | hwb(180 0% 49.8%) | 0 | 128 | 128 | 180.0 | 100.0 | 25.1 | 180.0 | 0.0 | 49.8 | 180 | 100 | 25.1 | 180 | 0 | 49.8 | 0 | 128 | 128 | 180 | 100 | 25 | 0 | 50 | 0.00 | 0.50 | 0.50 | 0.00 | 0.50 | 0.50 | 0.50 | |
| thistle | rgb:[216,191,216], hsl:[300.0, 24.3, 79.8], hwb:[300.0, 74.9, 15.3] | rgb(216 191 216) | hsl(300 24.3% 79.8%) | hwb(300 74.9% 15.3%) | 216 | 191 | 216 | 300.0 | 24.3 | 79.8 | 300.0 | 74.9 | 15.3 | 300 | 24.3 | 79.8 | 300 | 74.9 | 15.3 | 216 | 191 | 216 | 300 | 24 | 80 | 75 | 15 | 0.85 | 0.75 | 0.85 | 0.75 | 0.85 | 0.10 | 1.60 | |
| tomato | rgb:[255, 99, 71], hsl:[ 9.1,100.0, 63.9], hwb:[ 9.1, 27.8, 0.0] | rgb(255 99 71) | hsl(9.1 100% 63.9%) | hwb(9.1 27.8% 0%) | 255 | 99 | 71 | 9.1 | 100.0 | 63.9 | 9.1 | 27.8 | 0.0 | 9.1 | 100 | 63.9 | 9.1 | 27.8 | 0 | 255 | 99 | 71 | 9 | 100 | 64 | 28 | 0 | 1.00 | 0.39 | 0.28 | 0.28 | 1.00 | 0.72 | 1.28 | |
| turquoise | rgb:[ 64,224,208], hsl:[174.0, 72.1, 56.5], hwb:[174.0, 25.1, 12.2] | rgb(64 224 208) | hsl(174 72.1% 56.5%) | hwb(174 25.1% 12.2%) | 64 | 224 | 208 | 174.0 | 72.1 | 56.5 | 174.0 | 25.1 | 12.2 | 174 | 72.1 | 56.5 | 174 | 25.1 | 12.2 | 64 | 224 | 208 | 174 | 72 | 56 | 25 | 12 | 0.25 | 0.88 | 0.82 | 0.25 | 0.88 | 0.63 | 1.13 | |
| violet | rgb:[238,130,238], hsl:[300.0, 76.1, 72.2], hwb:[300.0, 51.0, 6.7] | rgb(238 130 238) | hsl(300 76.1% 72.2%) | hwb(300 51% 6.7%) | 238 | 130 | 238 | 300.0 | 76.1 | 72.2 | 300.0 | 51.0 | 6.7 | 300 | 76.1 | 72.2 | 300 | 51 | 6.7 | 238 | 130 | 238 | 300 | 76 | 72 | 51 | 7 | 0.93 | 0.51 | 0.93 | 0.51 | 0.93 | 0.42 | 1.44 | |
| wheat | rgb:[245,222,179], hsl:[ 39.1, 76.7, 83.1], hwb:[ 39.1, 70.2, 3.9] | rgb(245 222 179) | hsl(39.1 76.7% 83.1%) | hwb(39.1 70.2% 3.9%) | 245 | 222 | 179 | 39.1 | 76.7 | 83.1 | 39.1 | 70.2 | 3.9 | 39.1 | 76.7 | 83.1 | 39.1 | 70.2 | 3.9 | 245 | 222 | 179 | 39 | 77 | 83 | 70 | 4 | 0.96 | 0.87 | 0.70 | 0.70 | 0.96 | 0.26 | 1.66 | |
| white | rgb:[255,255,255], hsl:[ 0.0, 0.0,100.0], hwb:[ 0.0,100.0, 0.0] | rgb(255 255 255) | hsl(0 0% 100%) | hwb(0 100% 0%) | 255 | 255 | 255 | 0.0 | 0.0 | 100.0 | 0.0 | 100.0 | 0.0 | 0 | 0 | 100 | 0 | 100 | 0 | 255 | 255 | 255 | 0 | 0 | 100 | 100 | 0 | 1.00 | 1.00 | 1.00 | 1.00 | 1.00 | 0.00 | 2.00 | |
| whitesmoke | rgb:[245,245,245], hsl:[ 0.0, 0.0, 96.1], hwb:[ 0.0, 96.1, 3.9] | rgb(245 245 245) | hsl(0 0% 96.1%) | hwb(0 96.1% 3.9%) | 245 | 245 | 245 | 0.0 | 0.0 | 96.1 | 0.0 | 96.1 | 3.9 | 0 | 0 | 96.1 | 0 | 96.1 | 3.9 | 245 | 245 | 245 | 0 | 0 | 96 | 96 | 4 | 0.96 | 0.96 | 0.96 | 0.96 | 0.96 | 0.00 | 1.92 | |
| yellow | rgb:[255,255, 0], hsl:[ 60.0,100.0, 50.0], hwb:[ 60.0, 0.0, 0.0] | rgb(255 255 0) | hsl(60 100% 50%) | hwb(60 0% 0%) | 255 | 255 | 0 | 60.0 | 100.0 | 50.0 | 60.0 | 0.0 | 0.0 | 60 | 100 | 50 | 60 | 0 | 0 | 255 | 255 | 0 | 60 | 100 | 50 | 0 | 0 | 1.00 | 1.00 | 0.00 | 0.00 | 1.00 | 1.00 | 1.00 | |
| yellowgreen | rgb:[154,205, 50], hsl:[ 79.7, 60.8, 50.0], hwb:[ 79.7, 19.6, 19.6] | rgb(154 205 50) | hsl(79.7 60.8% 50%) | hwb(79.7 19.6% 19.6%) | 154 | 205 | 50 | 79.7 | 60.8 | 50.0 | 79.7 | 19.6 | 19.6 | 79.7 | 60.8 | 50 | 79.7 | 19.6 | 19.6 | 154 | 205 | 50 | 80 | 61 | 50 | 20 | 20 | 0.60 | 0.80 | 0.20 | 0.20 | 0.80 | 0.61 | 1.00 | |
| rgb to xyz-d65 | [ | CFunc rgbToLab() | rdrr.io XYZ whitepoint table | 16 | 0.008856 | 903.3 | 903.2962962963 | 0.008856451679 | |||||||||||||||||||||||||
| CFunc | colorjs | diff | colormath | diff | math - js | 6.7772399283 | 0.612874906 | -61.28% | rgb | colormine.org | d50 | d65 | D50 | 0.9642200 | 1 | 0.8252100 | 116 | 0.001 | 0.9032963 | 0.9032920 | 7.787 | ||||||||||||
| 0.4820152 | 0.4820152 | 0.0000000 | 0.48202 | -0.0000048 | 0.0000048 | 0.0000255 | 0.0000255 | 0.4819897 | -9.3945032053 | 0.987836817 | -98.78% | 84 | 89.58034 | 89.40564 | 89.57784 | D50.ICC | 0.9642029 | 1 | 0.8249054 | 0.1379310345 | 0.010 | 8.9914424 | 0.1379310345 | ||||||||||
| 0.7539755 | 0.7539755 | 0.0000000 | 0.75398 | -0.0000045 | 0.0000045 | 0.0000224 | 0.0000224 | 0.7539531 | 2.6040686475 | 0.766584275 | -76.65% | 252 | -56.35172 | -55.14190 | -56.35528 | D65 | 0.9504700 | 1 | 1.0888300 | ||||||||||||||
| 0.6305360 | 0.6305360 | 0.0000000 | 0.63054 | -0.0000040 | 0.0000040 | 0.0001255 | 0.0001255 | 0.6304105 | ] | 194 | 15.33217 | 14.64151 | 15.33759 | ||||||||||||||||||||
| 0.890295692 | 0.160670193 | 165.8706929 | color(a98-rgb 0.0000255352380269525 0.0000223862358920135 0.000125480433031955) | vs d50 | easyRGB XYZ whitepoint table | ||||||||||||||||||||||||||||
| rgb to xyz-d50 | 89.4060486 | 57.0506355 | 165.106861 | -0.00250 | D50 | 96.422 | 100 | 82.521 | 96.720 | 100 | 81.427 | ||||||||||||||||||||||
| CFunc | colorjs | diff | 89.03% | -0.15580948 | 0.039221373 | rgb(32.94117647% | 98.82% | 76.07843137%) | -0.00356 | D65 | 95.047 | 100 | 108.883 | 94.811 | 100 | 107.304 | |||||||||||||||||
| 0.4907714 | 0.4907714 | 0.0000000 | 0.088655586 | 0.97344529 | 0.539479489 | 0.00543 | |||||||||||||||||||||||||||
| 0.7502787 | 0.7502787 | 0.0000000 | 0.088655586 | 8.8655586 | 0.00000 | 0.9642956764 | 1 | 0.8251046025 | |||||||||||||||||||||||||
| 0.4809797 | 0.4809797 | 0.0000000 | 0.97344529 | 97.344529 | 89.40659 | -0.00095 | colorjs.io | colorizer.org | 0.9504559271 | 1 | 1.0890577508 | ||||||||||||||||||||||
| 0.00885645167904 | 0.539479489 | 53.9479489 | -55.14149 | -0.00040 | 89.4056371272 | 89.40605 | 89.58 | ninedegreesbelow | |||||||||||||||||||||||||
| rgb to lab | 903.2962962963 | 14.66339 | -0.02188 | -55.1418970207 | -55.13410 | -56.35 | 0.964202881 | 1 | 0.824905396 | 100 | 107.304 | ||||||||||||||||||||||
| CFunc | colorjs | diff | 0.4547069272 | 0.00041 | at | 82.49 | 14.6415097029 | 14.662987356759 | 15.33 | ||||||||||||||||||||||||
| 0.4907714 | 0.4907714 | 0.0000000 | vs d50 | vs d65 | 0.331 | ||||||||||||||||||||||||||||
| 0.7502787 | 0.7502787 | 0.0000000 | 16,777,216 | 14.6629873567589 | -0.00041 | -0.00041 | 0.00 | ||||||||||||||||||||||||||
| 0.4809797 | 0.4809797 | 0.0000000 | 1.09929682680942 | -0.0000000000001 | at | 82.4893978408 | -0.00780 | -0.00780 | -0.01 | 35.517624 | |||||||||||||||||||||||
| 0.4547069272 | -0.02148 | -0.02148 | 0.01 | 324.1812688822 | |||||||||||||||||||||||||||||
| rgb to prophoto-rgb | 0.4166666667 | oklch.com | easyRGB | ||||||||||||||||||||||||||||||
| me | colorjs | 89.41 | 89.578 | ||||||||||||||||||||||||||||||
| 0.6733265521 | 0.6370580 | 0.0362686 | srgb-linear | 89.41% | 57.05 | 165.11 | -55.13 | -56.355 | |||||||||||||||||||||||||
| 0.8524647195 | 0.9280215 | -0.0755568 | hsl | [ | 14.66 | 15.338 | 0.412221 | 0.536333 | 0.051446 | 0.412391 | 0.357584 | 0.180481 | |||||||||||||||||||||
| 0.6659405581 | 0.7409478 | -0.0750072 | hwb | 8.8655586286 | 8.8655586 | 0.0000000 | vs d50 | vs d65 | 0.211903 | 0.680700 | 0.107397 | 0.212639 | 0.715169 | 0.072192 | |||||||||||||||||||
| 0.4125, 0.3576, 0.1804 | lch | 97.3445290398 | 97.344529 | 0.0000000 | 0.00 | 0.000 | 0.088302 | 0.281719 | 0.629979 | 0.019331 | 0.119195 | 0.950532 | |||||||||||||||||||||
| 0.2127, 0.7152, 0.0722 | oklch | 53.9479489012 | 53.9479489 | 0.0000000 | -0.01 | 0.000 | |||||||||||||||||||||||||||
| 0.0193, 0.1192, 0.9503 | lab | ] | -0.02 | 0.000 | |||||||||||||||||||||||||||||
| 0.4124564 | 0.3575761 | 0.1804375 | 0.4125 | 0.3576 | 0.1804 | oklab | 0.890295692 | -0.15580948 | 0.039221373) | 82.4893978408 | |||||||||||||||||||||||
| 0.2126729 | 0.7151522 | 0.072175 | 0.2127 | 0.7152 | 0.0722 | a98-rgb | 0.890295692 | 0.160670191 | 165.8706929) | 14.6629873567589 | |||||||||||||||||||||||
| 0.0193339 | 0.119192 | 0.9503041 | 0.0193 | 0.1192 | 0.9503 | prophoto-rgb | -0.0000000000001 | ||||||||||||||||||||||||||
| display-p3 | 0.0180539685 | ||||||||||||||||||||||||||||||||
| 0.4124 | 0.3576 | 0.1805 | rec2020 | javascript: | 1.09929682680941 | colorjs | CFunc | ||||||||||||||||||||||||||
| 0.2126 | 0.7152 | 0.0722 | xyz-d50 | russellCottrell: | 1.09929682680944 | d50: | 0.490771439 | 49.0771438996 | 49.07143 | -0.005715 | 49.0689012675 | -0.00824 | -0.0025277 | ||||||||||||||||||||
| 0.0193 | 0.1192 | 0.9505 | xyz-d65 | Excel: | 1.09929682680942 | fujiwaratko | 0.7502787243 | 75.0278724275 | 75.02902 | 0.001146 | 75.0269938094 | -0.00088 | 0.0002675 | ||||||||||||||||||||
| d50: | 0.4360410 | 0.3851130 | 0.1430460 | 0.4809797092 | 48.0979709208 | 48.08649 | -0.011479 | 48.1042932511 | 0.00632 | 0.0051566 | |||||||||||||||||||||||
| -0.0001 | 0.0000 | 0.0001 | 2.19921875 | 0.2224850 | 0.7169050 | 0.0606100 | colormine.org | colorizer | |||||||||||||||||||||||||
| -0.0001 | 0.0000 | 0.0000 | 2.19921875 | 0.0139200 | 0.0970670 | 0.7139130 | d65: | 0.4820151844 | 48.2015184412 | 48.1989664762 | -0.002552 | 48.1989664762 | 48.2041647397 | -0.0051982635 | 0.0026462985 | 48.2 | -0.0010335238 | ||||||||||||||||
| 0.0000 | 0.0000 | 0.0002 | lindholm | 0.7539755478 | 75.3975547802 | 75.3953113764 | -0.002243 | 75.3953113764 | 75.4006668444 | -0.005355468 | 0.0031120642 | 75.4 | -0.0046886236 | ||||||||||||||||||||
| d50: | 0.4360747 | 0.3850649 | 0.1430804 | 0.6305358933 | 63.053589334 | 63.0410519567 | -0.012537 | 63.0410519567 | 63.0520985737 | -0.011046617 | -0.0014907603 | 63.05 | -0.0089480433 | ||||||||||||||||||||
| 0.4125 | 0.3576 | 0.1804 | 0.2225045 | 0.7168786 | 0.0606169 | ||||||||||||||||||||||||||||
| 0.2127 | 0.7152 | 0.0722 | 0.0139322 | 0.0971045 | 0.7141733 | -0.002551965 | |||||||||||||||||||||||||||
| 0.0193 | 0.1192 | 0.9503 | 16.67 | -0.0022434038 | |||||||||||||||||||||||||||||
| color | xyz-d50 | 0.4907714 | 0.7502787 | 0.4809797 | 5000 | d65: | 0.4124564 | 0.3575761 | 0.1804375 | -0.0125373773 | |||||||||||||||||||||||
| 300 | 0.2126729 | 0.7151522 | 0.0721750 | ||||||||||||||||||||||||||||||
| 0.4123908 | 0.3575843 | 0.1804808 | 4.2 | 0.0193339 | 0.1191920 | 0.9503041 | |||||||||||||||||||||||||||
| 0.2126390 | 0.7151687 | 0.0721923 | 4 | saturncloud | |||||||||||||||||||||||||||||
| 0.0193308 | 0.1191948 | 0.9505322 | 300 | d65: | 0.4124564 | 0.3575761 | 0.1804375 | ||||||||||||||||||||||||||
| 255 | 0.2126729 | 0.7151522 | 0.0721750 | ||||||||||||||||||||||||||||||
| 1.0479298 | 0.0229468 | -0.0501922 | color(ictcp 0.15 0.19 -0.1) | 63.75 | 0.0193339 | 0.1191920 | 0.9503041 | ||||||||||||||||||||||||||
| 0.0296278 | 0.9904345 | -0.0170738 | lab(2.79 17.4 -38) | ||||||||||||||||||||||||||||||
| -0.0092431 | 0.0150551 | 0.7518743 | 0.0000000 | 0.0000000 | 0.0000000 | ||||||||||||||||||||||||||||
| color(jzczhz 0.02 0.08 263) | 0.0000000 | 0.0000000 | 0.0000000 | ||||||||||||||||||||||||||||||
| 0.4321566 | lab(2.79 17.4 -38) | 0.0000000 | 0.0000000 | 0.0000000 | |||||||||||||||||||||||||||||
| -0.0236183 | -0.0274888 | 0.0373571 | |||||||||||||||||||||||||||||||
| -0.0098316 | -0.0017264 | 0.0115581 | |||||||||||||||||||||||||||||||
| 0.0054017 | 0.0220875 | 0.2361308 | |||||||||||||||||||||||||||||||
| type: | io: | ||||||
| legsInOut | [{type:E.in}, {type:E.out}] | linear | E.in | ||||
| easeInPow | Math.pow(pow) | pow | E.out | ||||
| easeOutPow | 1 - Math.pow(1 - x, pow) | sine | E.inOut | ||||
| easeInSine | 1 - Math.cos((x * Math.PI) / 2) | expo | E.outIn | ||||
| easeOutSine | Math.sin((x * Math.PI) / 2) | circ | |||||
| easeInOutSine | -(Math.cos (x * Math.PI) - 1) / 2 | back | |||||
| easeInExpo | x == 0 ? 0 : Math.pow(2, 10 * x - 10) | elastic | |||||
| easeOutExpo | x == 1 ? 1 : 1 - Math.pow(2, -10 * x) | bounce | |||||
| cubic | |||||||
| step | |||||||
| CSS | Webkit CSS | easings.net | |||||
| ease | 0.25 | 0.1 | 0.25 | 1 | |||
| ease-in | 0.42 | 0 | 1 | 1 | Math.pow(x, 1.685) | ||
| ease-out | 0 | 0 | 0.58 | 1 | 1 - Math.pow(1-x, 1.685) | ||
| ease-in-out | 0.42 | 0 | 0.58 | 1 | EIO = 0.5 * Math.pow(0.5, 1.925); x < 0.5 | ||
| jQuery | ? EIO * Math.pow(x, 1.925) : 1 - EIO * Math.pow(1 - x, 1.925) | ||||||
| InSine | 0.47 | 0 | 0.745 | 0.715 | {ease:sine} | 1 - cos((x * PI) / 2) | |
| OutSine | 0.39 | 0.575 | 0.565 | 1 | {ease:sine, type:E.out} | sin((x * PI) / 2) | |
| InOutSine | 0.445 | 0.05 | 0.55 | 0.95 | -(cos(PI * x) - 1) / 2 | ||
| InQuad | 0.55 | 0.085 | 0.68 | 0.53 | {pow:2} | x * x | x * x |
| OutQuad | 0.25 | 0.46 | 0.45 | 0.94 | {pow:2, type:E.out} | x -= 1; 1 - (x * x) | 1 - (1 - x) * (1 - x) |
| InOutQuad | 0.455 | 0.03 | 0.515 | 0.955 | {pow:2, legs:legsInOut} | x < 0.5 ? 2 * x * x : x -= 1; 1 - (2 * x * x) | x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2 |
| InCubic | 0.55 | 0.055 | 0.675 | 0.19 | {pow:3} | x * x * x | x * x * x |
| OutCubic | 0.215 | 0.61 | 0.355 | 1 | {pow:3, type:E.out} | x -= 1; 1 - (x * x * x) | 1 - pow(1 - x, 3) |
| InOutCubic | 0.645 | 0.045 | 0.355 | 1 | {pow:3, legs:legsInOut} | x < 0.5 ? 4 * x * x * x : x -= 1; 1 + (4 * x * x * x) | x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2 |
| InQuart | 0.895 | 0.03 | 0.685 | 0.22 | {pow:4} | x * x * x * x | |
| OutQuart | 0.165 | 0.84 | 0.44 | 1 | {pow:4, type:E.out} | 1 - pow(1 - x, 4) | |
| InOutQuart | 0.77 | 0 | 0.175 | 1 | {pow:4, legs:legsInOut} | x < 0.5 ? 8 * x * x * x * x : x -= 1; 1 + (8 * x * x * x * x) | x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2 |
| InQuint | 0.755 | 0.05 | 0.855 | 0.060 | {pow:5} | x * x * x * x * x | |
| OutQuint | 0.23 | 1 | 0.32 | 1 | {pow:5, type:E.out} | 1 - pow(1 - x, 5) | |
| InOutQuint | 1 | 0 | 0.07 | 1 | {pow:5, legs:legsInOut} | x < 0.5 ? 16 * x * x * x * x * x : x -= 1; 1 + (16 * x * x * x * x * x) | x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2 |
| InExpo | 0.95 | 0.05 | 0.795 | 0.035 | x === 0 ? 0 : pow(2, 10 * x - 10) | ||
| OutExpo | 0 | 1 | 0.22 | 1 | x === 1 ? 1 : 1 - pow(2, -10 * x) | ||
| InOutExpo | 1 | 0 | 0 | 1 | |||
| InCirc | 0.6 | 0.04 | 0.98 | 0.335 | 1 - sqrt(1 - pow(x, 2)) | ||
| OutCirc | 0.075 | 0.82 | 0.165 | 1 | sqrt(1 - pow(x - 1, 2)) | ||
| InOutCirc | 0.785 | 0.135 | 0.15 | 0.86 | |||
| InBack | 0.6 | -0.28 | 0.735 | 0.045 | c3 * x * x * x - c1 * x * x | ||
| OutBack | 0.175 | 0.885 | 0.32 | 1.275 | 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2) | ||
| InOutBack | 0.68 | -0.55 | 0.265 | 1.55 | |||
| easings.net | |||||||
| InElastic | |||||||
| OutElastic | |||||||
| InOutElastic | |||||||
| InBounce | |||||||
| OutBounce | |||||||
| InOutBounce | |||||||
| Viewport (r = w / h) | Device (r = w / h) | Aspect Ratio | Width | Height | Device | Viewport (r = w / h) | Device (r = w / h) | Aspect Ratio | Width | Height | |||||||||||||||||||||||||||||||||||||||||
| Type | Device | r | w | h | r | w | h | max | diff | max | diff | max | diff | max | diff | max | diff | max | diff | ||||||||||||||||||||||||||||||||
| Watch | Realme Watch 2020 | 1.000 | 160 | 160 | 1.000 | 320 | 320 | 1.217 | 1.217 | 0.000 | 414 | 1644 | 1230 | 1004 | 3840 | 2836 | iPhone 12 | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | 0.750 | 0.750 | 0.000 | 1024 | 2048 | 1024 | 1366 | 2960 | 1594 | |||||||||||||||||||
| Watch | LG Watch W7 | 1.000 | 180 | 180 | 1.000 | 360 | 360 | min | — | min | — | min | — | iPhone 12 Mini | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | min | — | min | — | min | — | |||||||||||||||||||||||||
| Watch | Samsung Watch 1.2" | 1.000 | 180 | 180 | 1.000 | 360 | 360 | 0.410 | 0.410 | 0.001 | 160 | 320 | 160 | 160 | 320 | 160 | iPhone 12 Pro | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | 0.462 | 0.449 | 0.012 | 214 | 640 | 426 | 379 | 1024 | 645 | |||||||||||||||||||
| Watch | Samsung Watch 1.3" | 1.000 | 180 | 180 | 1.000 | 360 | 360 | iPhone 12 Pro Max | 0.462 | 428 | 926 | 0.449 | 1248 | 2778 | |||||||||||||||||||||||||||||||||||||
| Watch | Samsung Watch 3 1.2" - 2020 | 1.000 | 180 | 180 | 1.000 | 360 | 360 | range | range | range | iPhone SE | 0.565 | 214 | 379 | 0.563 | 640 | 1136 | range | range | range | 1030 | ||||||||||||||||||||||||||||||
| Watch | Samsung Watch 3 1.4" - 2020 | 1.000 | 180 | 180 | 1.000 | 360 | 360 | 0.807 | 0.808 | 254 | 1324 | 844 | 3520 | iPhone 11 Pro Max | 0.462 | 414 | 896 | 0.462 | 1242 | 2688 | 0.288 | 0.301 | 810 | 1408 | 987 | 1936 | 635 | 24 | |||||||||||||||||||||||
| Watch | Samsung Watch 1.2" - 2019 | 1.000 | 180 | 180 | 1.000 | 360 | 360 | median* | median | median | iPhone 11 Xs Max | 0.462 | 414 | 896 | 0.462 | 1242 | 2688 | median | median | 480 | |||||||||||||||||||||||||||||||
| Watch | Samsung Watch 1.4" - 2019 | 1.000 | 180 | 180 | 1.000 | 360 | 360 | 0.474 | 0.474 | 360 | 1080 | 780 | 2340 | iPhone 11 | 0.462 | 414 | 896 | 0.462 | 828 | 1792 | 0.562 | 0.563 | 411 | 1170 | 780 | 2436 | 11520 | ||||||||||||||||||||||||
| Watch | Apple Watch Series (40mm) | 1.216 | 197 | 162 | 1.216 | 394 | 324 | average* | average | average | iPhone 11 Xr | 0.462 | 414 | 896 | 0.462 | 828 | 1792 | average | average | ||||||||||||||||||||||||||||||||
| Watch | Apple Watch Series (44mm) | 1.217 | 224 | 184 | 1.217 | 448 | 368 | 0.695 | 0.695 | 309 | 891.3846153846 | 506.1282051282 | 1496.358974359 | iPhone 11 Pro | 0.462 | 375 | 812 | 0.462 | 1125 | 2436 | 0.562 | 0.562 | 469 | 1215.9555555556 | 820.9555555556 | 2194.5333333333 | |||||||||||||||||||||||||
| Watch | Huawei Watch GT | 1.000 | 227 | 227 | 1.000 | 454 | 454 | iPhone 11 X | 0.462 | 375 | 812 | 0.462 | 1125 | 2436 | 0.156250 | ||||||||||||||||||||||||||||||||||||
| Watch | Xiaomi Mi Watch 2020 | 1.000 | 227 | 227 | 1.000 | 454 | 454 | *0.563 | is portrait HD: 1080 x 1920 | iPhone 11 Xs | 0.462 | 375 | 812 | 0.462 | 1125 | 2436 | *0.563 | is portrait HD: 1080 x 1920 | 0.03125 | ||||||||||||||||||||||||||||||||
| Watch | Xiaomi Mi Watch Revolve 2020 | 1.000 | 227 | 227 | 1.000 | 454 | 454 | Everything here is portrait orientation | iPhone X | 0.462 | 375 | 812 | 0.462 | 1125 | 2436 | Everything here is portrait orientation | 0.0625 | 0.15625 | |||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 5 | 0.563 | 320 | 568 | 0.563 | 640 | 1136 | iPhone 8 Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | |||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 5c | 0.563 | 320 | 568 | 0.563 | 640 | 1136 | iPhone 8 | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | 16th | 8th | 3/16ths | quarter | 5/16ths | 3/8ths | 7/16ths | half | 9/16ths | 5/8ths | 11/16ths | 3 quarters | 13/16ths | 7/8ths | 15/16ths | whole | |||||||||||||||||||||
| Mobile | Apple iPhone 5s | 0.563 | 320 | 568 | 0.563 | 640 | 1136 | iPhone 7 Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | 0.0625 | 0.125 | 0.1875 | 0.25 | 0.3125 | 0.375 | 0.4375 | 0.5 | 0.5625 | 0.625 | 0.6875 | 0.75 | 0.8125 | 0.875 | 0.9375 | 1 | |||||||||||||||||||||
| Mobile | Apple iPhone SE | 0.563 | 320 | 568 | 0.563 | 640 | 1136 | 375 | 985 | 0.3807106599 | 333 | 320 | iPhone 7 | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||
| Mobile | LG K20 (2019) | 0.500 | 320 | 640 | 0.500 | 480 | 960 | 914 | 308 | -59 | 274 | iPhone 6s Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | line-height | mono | Roboto | ||||||||||||||||||||||||||||||
| Mobile | Honor 6X | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | 71 | 677 | 370 | 703 | iPhone 6s | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | 1.0000rem | 289px | 18.0625 | ||||||||||||||||||||||||||||||
| Mobile | HTC One | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | 642 | 642 | iPhone 6 Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | 1.0625rem | 298px | 18.625 | ||||||||||||||||||||||||||||||||
| Mobile | HTC One M8 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | 571 | -34.9642857143 | iPhone 6 | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | 1.1250rem | 307px | 19.1875 | ||||||||||||||||||||||||||||||||
| Mobile | HTC One M9 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | w | h | r | iPad Pro | 0.750 | 1024 | 1366 | 0.750 | 2048 | 2732 | 1.2500rem | 327px | 0 | |||||||||||||||||||||||||||||||
| Mobile | HTC U Ultra | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | viewBox | 872 | 618 | 0.7087155963 | iPad 3rd & 4th Gen | 0.750 | 768 | 1024 | 0.750 | 1536 | 2048 | 1.3125rem | 336px | 0 | ||||||||||||||||||||||||||||||
| Mobile | HTC U11 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | w, h | 452 | 320 | 0.7087155963 | iPad Air 1 & 2 | 0.750 | 768 | 1024 | 0.750 | 1536 | 2048 | |||||||||||||||||||||||||||||||||
| Mobile | Huawei P10 Plus | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | r | 0.518 | 0.518 | iPad Mini | 0.750 | 768 | 1024 | 0.750 | 768 | 1024 | ||||||||||||||||||||||||||||||||||
| Mobile | Huawei P8 Lite (2017) | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | iPad Mini 2 & 3 | 0.750 | 768 | 1024 | 0.750 | 1536 | 2048 | |||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P9, P9 Lite | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | fps | ms/frame | Nexus 6P | 0.562 | 411 | 731 | 0.563 | 1440 | 2560 | |||||||||||||||||||||||||||||||||||
| Mobile | LG G4, G3 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | 1000 | 160 | 6.250 | Nexus 5X | 0.562 | 411 | 731 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||
| Mobile | LG G5 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | 1000 | 165 | 6.0606060606 | Google Pixel | 0.562 | 411 | 731 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||
| Mobile | LG K10, K11 Plus | 0.563 | 360 | 640 | 0.563 | 720 | 1280 | 1000 | 170 | 5.882 | Google Pixel XL | 0.562 | 411 | 731 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||
| Mobile | LG K30 | 0.563 | 360 | 640 | 0.563 | 720 | 1280 | 1000 | 175 | 5.714 | Google Pixel 2 | 0.562 | 411 | 731 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||
| Mobile | LG Nexus 5 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | 1000 | 180 | 5.5555555556 | Google Pixel 2 XL | 0.499 | 411 | 823 | 0.500 | 1440 | 2880 | ||||||||||||||||||||||||||||||||||
| Mobile | LG Tribute Empire | 0.563 | 360 | 640 | 0.563 | 720 | 1280 | 1000 | 240 | 4.1666666667 | Samsung Galaxy Note 5 | 0.563 | 480 | 853 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note 3 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | 1000 | 360 | 2.7777777778 | LG G5 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note 4 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | 1000 | 480 | 2.0833333333 | LG G4 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||
| Mobile | Samsung S6 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | LG G3 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | |||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S6 edge | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | One Plus 3 | 0.563 | 480 | 853 | 0.563 | 1080 | 1920 | |||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S7 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | Samsung Galaxy S9 | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | |||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S7 Edge | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | Samsung Galaxy S9+ | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | |||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia X | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | Samsung Galaxy S8 | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | |||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia XZ | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | Samsung Galaxy S8+ | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | |||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia Z2 / Z3 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | Samsung Galaxy S7 | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | |||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia Z3 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | Samsung Galaxy S7 Edge | 0.563 | 360 | 640 | 0.563 | 1440 | 2560 | |||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia Z5 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | Nexus 7 (2013) | 0.625 | 600 | 960 | 0.625 | 1200 | 1920 | |||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 3 | 0.563 | 360 | 640 | 0.563 | 1080 | 1920 | Nexus 9 | 0.750 | 768 | 1024 | 0.750 | 1536 | 2048 | |||||||||||||||||||||||||||||||||||||
| Mobile | Honor 7X | 0.500 | 360 | 720 | 0.500 | 1080 | 2160 | Samsung Galaxy Tab 10 | 0.625 | 800 | 1280 | 0.625 | 800 | 1280 | |||||||||||||||||||||||||||||||||||||
| Mobile | HTC U11+ | 0.500 | 360 | 720 | 0.500 | 1440 | 2880 | Chromebook Pixel | 0.664 | 850 | 1280 | 0.664 | 1700 | 2560 | |||||||||||||||||||||||||||||||||||||
| Mobile | HTC U12+ | 0.500 | 360 | 720 | 0.500 | 1440 | 2880 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Mate 10 Lite | 0.500 | 360 | 720 | 0.500 | 1080 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG G6 | 0.500 | 360 | 720 | 0.500 | 1440 | 2880 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG K40 | 0.500 | 360 | 720 | 0.500 | 720 | 1440 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG Stylo 4 | 0.500 | 360 | 720 | 0.500 | 1080 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG Stylo 5 | 0.500 | 360 | 720 | 0.500 | 1080 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A6s | 0.500 | 360 | 720 | 0.500 | 1080 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note 8 | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note 9 | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S8 | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S8+ | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S9 | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S9+ | 0.486 | 360 | 740 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P20 Pro | 0.482 | 360 | 747 | 0.482 | 1080 | 2240 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | HTC Desire 19s | 0.474 | 360 | 760 | 0.474 | 720 | 1520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | HTC Wildfire X | 0.474 | 360 | 760 | 0.474 | 720 | 1520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P20 lite | 0.474 | 360 | 760 | 0.474 | 1080 | 2280 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG K50 | 0.474 | 360 | 760 | 0.474 | 720 | 1520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG W30 | 0.474 | 360 | 760 | 0.474 | 720 | 1520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S10 | 0.474 | 360 | 760 | 0.474 | 1440 | 3040 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Nova 7i | 0.468 | 360 | 770 | 0.468 | 1080 | 2310 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P40 Lite | 0.468 | 360 | 770 | 0.468 | 1080 | 2310 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P30 Lite | 0.467 | 360 | 771 | 0.467 | 1080 | 2312 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 12 mini | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 13 mini | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Honor 8X | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Honor 9X | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Mate 20 Lite | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Mate 20 Pro | 0.462 | 360 | 780 | 0.462 | 1440 | 3120 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Mate 30 | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Nova 7 Pro | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P30 | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P30 Pro | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P40 | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Y9 Prime | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Y9s | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG G7 Fit, G7 One | 0.462 | 360 | 780 | 0.462 | 1440 | 3120 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG G8 ThinQ | 0.462 | 360 | 780 | 0.462 | 1440 | 3120 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG G8X ThinQ | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG K61 | 0.462 | 360 | 780 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Motorola Moto G8 | 0.462 | 360 | 780 | 0.462 | 720 | 1560 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Nova 6 | 0.450 | 360 | 800 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Nova 7 SE | 0.450 | 360 | 800 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | LG K51S | 0.450 | 360 | 800 | 0.450 | 720 | 1600 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S20 | 0.450 | 360 | 800 | 0.450 | 1440 | 3200 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia 10 | 0.429 | 360 | 840 | 0.429 | 1080 | 2520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia 10 Plus | 0.429 | 360 | 840 | 0.429 | 1080 | 2520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia 5 | 0.429 | 360 | 840 | 0.429 | 1080 | 2520 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia L4 | 0.429 | 360 | 840 | 0.429 | 720 | 1680 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 6 | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 6s | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 7 | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 8 | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone SE (2020) | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone SE (2022) | 0.562 | 375 | 667 | 0.562 | 750 | 1334 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 11 Pro | 0.462 | 375 | 812 | 0.462 | 1125 | 2436 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone X | 0.462 | 375 | 812 | 0.462 | 1125 | 2436 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S20+ | 0.450 | 384 | 854 | 0.450 | 1440 | 3200 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S21 Ultra 5G | 0.450 | 384 | 854 | 0.450 | 1440 | 3200 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | vivo Y20 | 0.451 | 385 | 854 | 0.450 | 720 | 1600 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 12 | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 12 Pro | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 13 | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 13 Pro | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 14 | 0.462 | 390 | 844 | 0.462 | 1170 | 2532 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei Mate 30 Pro | 0.490 | 392 | 800 | 0.490 | 1176 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 3 | 0.500 | 393 | 786 | 0.500 | 1080 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S23 Ultra | 0.500 | 393 | 786 | 0.466 | 1440 | 3088 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 3a | 0.486 | 393 | 808 | 0.486 | 1080 | 2220 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 6 | 0.482 | 393 | 816 | 0.481 | 1080 | 2244 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 8 SE | 0.482 | 393 | 816 | 0.481 | 1080 | 2244 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 8, Mi 8 Pro | 0.481 | 393 | 817 | 0.481 | 1080 | 2244 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 4 | 0.473 | 393 | 830 | 0.474 | 1080 | 2280 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 4a | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 5 | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 10 | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 10 Pro | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 9 Lite | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 9 SE | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 9, Mi 9T | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Redmi Note 7 | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Redmi Note 8 | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Redmi Note 8 Pro | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Redmi Note 9 | 0.462 | 393 | 851 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 14 Pro | 0.461 | 393 | 852 | 0.461 | 1179 | 2556 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 15 | 0.461 | 393 | 852 | 0.461 | 1179 | 2556 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 15 Pro | 0.461 | 393 | 852 | 0.461 | 1179 | 2556 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Mi 10T, Xiaomi Mi 10T Pro | 0.450 | 393 | 873 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Xiaomi Redmi Note 9 Pro | 0.450 | 393 | 873 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Huawei P40 Pro | 0.455 | 400 | 880 | 0.455 | 1200 | 2640 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Motorola Nexus 6 | 0.562 | 411 | 731 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Motorola Nexus 6P | 0.562 | 411 | 731 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia 1 | 0.428 | 411 | 960 | 0.428 | 1644 | 3840 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel | 0.563 | 412 | 732 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 2 | 0.563 | 412 | 732 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel XL | 0.563 | 412 | 732 | 0.563 | 1440 | 2560 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung J7 Prime2 | 0.563 | 412 | 732 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 2 XL | 0.501 | 412 | 823 | 0.500 | 1440 | 2880 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 3a XL | 0.501 | 412 | 823 | 0.500 | 1080 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 3 XL | 0.487 | 412 | 846 | 0.486 | 1440 | 2960 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Google Pixel 4 XL | 0.474 | 412 | 869 | 0.474 | 1440 | 3040 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 6 | 0.474 | 412 | 869 | 0.474 | 1080 | 2280 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note10 | 0.474 | 412 | 869 | 0.474 | 1080 | 2280 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note10+ | 0.474 | 412 | 869 | 0.474 | 1440 | 3040 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S10+ | 0.474 | 412 | 869 | 0.474 | 1440 | 3040 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note20 Ultra | 0.467 | 412 | 883 | 0.466 | 1440 | 3088 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 6T | 0.462 | 412 | 892 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 7 | 0.462 | 412 | 892 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 7 Pro | 0.462 | 412 | 892 | 0.462 | 1440 | 3120 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 7T Pro | 0.462 | 412 | 892 | 0.462 | 1440 | 3120 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A30 | 0.462 | 412 | 892 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A50 | 0.462 | 412 | 892 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A50s | 0.462 | 412 | 892 | 0.462 | 1080 | 2340 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 8 Pro | 0.455 | 412 | 906 | 0.455 | 1440 | 3168 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 7T | 0.451 | 412 | 914 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 8T | 0.451 | 412 | 914 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A70s | 0.451 | 412 | 914 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A71 | 0.451 | 412 | 914 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S10 Lite | 0.451 | 412 | 914 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S20 FE | 0.451 | 412 | 914 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 8 | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 9 | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus Nord | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A31 | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A32/td> | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung A51 | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Note20 | 0.450 | 412 | 915 | 0.450 | 1080 | 2400 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung S20 Ultra | 0.450 | 412 | 915 | 0.450 | 1440 | 3200 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | OnePlus 9 Pro | 0.448 | 412 | 919 | 0.448 | 1440 | 3216 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Samsung Z Flip | 0.410 | 412 | 1004 | 0.410 | 1080 | 2636 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 11 | 0.462 | 414 | 896 | 0.462 | 828 | 1792 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 6s Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 7 Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 8 Plus | 0.563 | 414 | 736 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 11 Pro Max | 0.462 | 414 | 896 | 0.462 | 1242 | 2688 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone XR | 0.462 | 414 | 896 | 0.462 | 828 | 1792 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone XS Max | 0.462 | 414 | 896 | 0.462 | 1242 | 2688 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 12 Pro Max | 0.462 | 428 | 926 | 0.462 | 1284 | 2778 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 13 Pro Max | 0.462 | 428 | 926 | 0.462 | 1284 | 2778 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 14 Plus | 0.462 | 428 | 926 | 0.462 | 1284 | 2778 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 14 Pro Max | 0.461 | 430 | 932 | 0.461 | 1290 | 2796 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 15 Plus | 0.461 | 430 | 932 | 0.461 | 1290 | 2796 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Apple iPhone 15 Pro Max | 0.461 | 430 | 932 | 0.461 | 1290 | 2796 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia C4 | 0.563 | 540 | 960 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Mobile | Sony Xperia Z Ultra | 0.563 | 540 | 960 | 0.563 | 1080 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | LG G Pad 5 10.1" | 0.625 | 600 | 960 | 0.625 | 1200 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Apple iPad Mini | 0.750 | 768 | 1024 | 0.750 | 1536 | 2048 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Apple iPad 10.2" | 0.750 | 810 | 1080 | 0.750 | 1620 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Apple iPad Air (2020) | 0.695 | 820 | 1180 | 0.695 | 1640 | 2360 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Apple iPad Air | 0.750 | 834 | 1112 | 0.750 | 1668 | 2224 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Apple iPad Pro 11" | 0.698 | 834 | 1194 | 0.698 | 1668 | 2388 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Apple iPad Pro 12.9" | 0.750 | 1024 | 1366 | 0.750 | 2048 | 2732 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface 2 | 1.778 | 1280 | 720 | 1.778 | 1920 | 1080 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface 3 | 1.778 | 1280 | 720 | 1.778 | 1920 | 1080 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro | 1.778 | 1280 | 720 | 1.778 | 1920 | 1080 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro 2 | 1.778 | 1280 | 720 | 1.778 | 1920 | 1080 | ||||||||||||||||||||||||||||||||||||||||||||
| Tablet | Huawei MatePad Pro | 1.600 | 1280 | 800 | 1.600 | 2560 | 1600 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | MacBook Air 13.3" | 1.600 | 1280 | 800 | 1.600 | 2560 | 1600 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | MacBook Pro 13.3" | 1.600 | 1280 | 800 | 1.600 | 2560 | 1600 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface | 1.779 | 1366 | 768 | 1.779 | 1366 | 768 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro 4 | 1.500 | 1368 | 912 | 1.500 | 2736 | 1824 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro 5 | 1.500 | 1368 | 912 | 1.500 | 2736 | 1824 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro 6 | 1.500 | 1368 | 912 | 1.500 | 2736 | 1824 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro 7 | 1.500 | 1368 | 912 | 1.500 | 2736 | 1824 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | MacBook Pro | 1.600 | 1440 | 900 | 1.600 | 2880 | 1800 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro 3 | 1.500 | 1440 | 960 | 1.500 | 2160 | 1440 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Pro X | 1.500 | 1440 | 960 | 1.500 | 2880 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Book | 1.500 | 1500 | 1000 | 1.500 | 3000 | 2000 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Book 3 (13.5") | 1.500 | 1500 | 1000 | 1.500 | 3000 | 2000 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Laptop | 1.500 | 1504 | 1003 | 1.500 | 2256 | 1504 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Laptop 3 (13.5") | 1.500 | 1504 | 1003 | 1.500 | 2256 | 1504 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | MacBook Pro 16" | 1.600 | 1536 | 960 | 1.600 | 3072 | 1920 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Book 3 (15") | 1.500 | 1620 | 1080 | 1.500 | 3240 | 2160 | ||||||||||||||||||||||||||||||||||||||||||||
| Laptop | Microsoft Surface Laptop 3 (15") | 1.499 | 1664 | 1110 | 1.500 | 2496 | 1664 | ||||||||||||||||||||||||||||||||||||||||||||
| Firefox | Chrome | Safari | Opera | Android Ch | Android FF | iOS Chrome | iOS Safari | Filezilla: change smaws directory names to lower case e.g. “censored” | Firefox | Chrome | 50.1216216216 | {status: 5, waitNow: false, value: 0, unit: 0, flip: 1} | FALSE | e: {status: 1, waitNow: false, value: 1000, unit: 1, flip: 0} | ||||||||||||||||||
| set location.url or | DOMContentLoaded | DOMContentLoaded | pauseIdler | visChange | touch requires pauseIdler on clickIt(), not mouseIt() | 16.67 | 16.66 | 10469.2999999523 | e2: {value: 0, unit: 0, flip: 1} | FALSE | e2: {value: 1000, unit: 1, flip: 0} | |||||||||||||||||||||
| set address bar url | pageshow false navigate | pageshow false navigate | mouseIt | test: linksMenu open, click songButt to open songMenu | 0.00 | 21.53 | 0.00 | 16.64 | 10510.3999999761 | 41.1000000238 | #autoTrip: false | TRUE | #autoTrip: false | |||||||||||||||||||
| F5 Refresh or | pagehide | NO audio typist.line = typist line count error cueLogo() | pauseIt | clickIt | data-links attribute, mouseIt() | 110.76 | 110.76 | 16.28 | 16.28 | 10562.1000000238 | 51.7000000477 | #base: 0 | TRUE | #base: 0 | ||||||||||||||||||
| location.reload() | visibilityState: hidden | grainy animation not running in Chrome (pre-agree) | loadIt | 116.58 | 5.82 | 32.94 | 16.67 | 10610.8999999761 | 48.7999999523 | #count: undefined | TRUE | #count: undefined | ||||||||||||||||||||
| DOMContentLoaded | DOMContentLoaded | pulsing (blinking) YES> NO> on welcome “screen” | 133.24 | 16.66 | 49.61 | 16.67 | 10660.6000000238 | 49.7000000477 | #dist: 1000 | TRUE | #dist: 1000 | |||||||||||||||||||||
| pageshow false reload | pageshow false reload | censored/uncensored: | 149.90 | 16.66 | 66.23 | 16.61 | 10717.2999999523 | 56.6999999285 | #e: Object | TRUE | #e: Object | |||||||||||||||||||||
| leave page | pagehide | pagehide | wipe “arm” to “uck” in final <tspan> of logo | 166.56 | 16.66 | 82.94 | 16.72 | 10763.7000000476 | 46.4000000953 | #end: 1000 | TRUE | #end: 1000 | ||||||||||||||||||||
| visibilityState: hidden | visibilityState: hidden | slight delay between typing and wipe? 500ms | 300 | 493 | 183.24 | 16.68 | 99.54 | 16.60 | 10811.1000000238 | 47.3999999762 | #firstLeg: Object | TRUE | #firstLeg: Object | |||||||||||||||||||
| back/fwd to page | visibilityState: visible | visibilityState: visible | RAF.js – what's the deal with _colors and FN.rgb? | 320 | 2000 | 199.90 | 16.66 | 116.24 | 16.70 | 10872 | 60.8999999762 | #inbound: undefined | FALSE | #inbound: true | ||||||||||||||||||
| pageshow true back_forward | pageshow true navigate (!sometimes back_forward) | smooth out opening gpu test static animation, slower | 0.0666666667 | 246.5 | 216.56 | 16.66 | 132.94 | 16.70 | 10910.7999999523 | 38.7999999523 | #isInc: false | TRUE | #isInc: false | |||||||||||||||||||
| switch tabs | apps | visibilitychange | visibilitychange | Quick fade in wipe audio (neon?) | 0.0666666667 | 246.5 | 233.24 | 16.68 | 149.61 | 16.67 | 10966.6000000238 | 55.8000000715 | #lastLeg: Object | TRUE | #lastLeg: Object | ||||||||||||||||||
| uncensored checkbox check mark for checked visual | 246.5 | 249.90 | 16.66 | 166.28 | 16.67 | 11012.7000000476 | 46.1000000238 | #leg: Object | TRUE | #leg: Object | ||||||||||||||||||||||
| 169 | hide (fade out) static bg after hasAgreed | #cloth baseFrequency | 266.56 | 16.66 | 182.94 | 16.66 | 11075.1000000238 | 62.3999999762 | #legsWait: NaN | TRUE | #legsWait: NaN | |||||||||||||||||||||
| 169 | A and AT variables should be named P and PR, property not attribute... | 11.187 | terrycloth | 3.528 | 5 | 17.64 | 283.24 | 16.68 | 199.61 | 16.67 | 11111.5 | 36.3999999762 | #loop: undefined | TRUE | #loop: undefined | |||||||||||||||||
| 375 | documentation too... | 10.067 | post-animation | 299.90 | 16.66 | 216.27 | 16.67 | 11168.8999999761 | 57.3999999761 | #now: 0 | TRUE | #now: 0 | ||||||||||||||||||||
| 37 | links menu (aka share menu): github, linkedin, (uncensored: youtube), | 1.120 | 316.56 | 16.66 | 232.94 | 16.67 | 11217.1000000238 | 48.2000000477 | #onArrival: 0 | TRUE | #onArrival: 0 | |||||||||||||||||||||
| dist: 500 | dist: 500 | stackoverflow, bugzilla?, chrome bugs? The one with colors to settings was good, the others... | 323 | 323 | 333.24 | 16.68 | 249.60 | 16.66 | 11260.2999999523 | 43.1999999285 | #pause: 0 | TRUE | #pause: 0 | |||||||||||||||||||
| down: false | down: false | or sidewayss youtube account and all censored, no Cracker-In-Chief | 314 | 310 | -4 | 349.90 | 16.66 | 266.22 | 16.61 | 11324.8999999761 | 64.6000000238 | #pauseRT: 0 | TRUE | #pauseRT: 0 | ||||||||||||||||||
| ease: ƒ #sineOut(v) | copyLink click displays alert “link copied to clipboard.” - transition & timer would be nice... | 366.00 | 16.10 | 282.94 | 16.72 | 11371.5 | 46.6000000239 | #peri: undefined | TRUE | #peri: undefined | ||||||||||||||||||||||
| end: 1000 | end: 1000 | - remove old share icon files from htdocs, facebook, twitter, mix, etc. | 10.797 | initial setting | -9 | -13 | -13 | 299.60 | 16.66 | 11417.3999999761 | 45.8999999761 | #plays: 1 | TRUE | #plays: 1 | ||||||||||||||||||
| io: 1 | io: 1 | 4.519 | Pause|Play idler button on homepage, bottom row of face | -0.390 | 316.27 | 16.67 | 11463 | 45.6000000239 | #post: undefined | TRUE | #post: undefined | |||||||||||||||||||||
| next: undefined | next: undefined | TRUE | revert to !hasAgreed button on face (can change uncensored checkbox) | 0.730 | 332.93 | 16.66 | 11525.6000000238 | 62.6000000238 | #pre: undefined | TRUE | #pre: undefined | |||||||||||||||||||||
| part: 0.5 | part: 0.5 | b | min | max | diff | censored toggle button on face? another thing to hide... | 349.61 | 16.67 | 11573.2999999523 | 47.6999999285 | #reversed: true | TRUE | #reversed: true | |||||||||||||||||||
| prev: {type: 1, io: 0, time: 1000, end: 500, start: 0, …} | prev: {type: 1, io: 0, time: 1000, end: 500, start: 0, …} | 226 | 43 | 226 | 183 | what to do with upcoming variable? | 1.036 | 1119 | 14 | 3 | 422.25 | 205 | 366.00 | 16.39 | 11619.5 | 46.2000000477 | #roundTrip: true | TRUE | #roundTrip: true | |||||||||||||
| start: 500 | start: 500 | 0.886 | 0.169 | 0.886 | 0.718 | 11660.6000000238 | 41.1000000238 | #run: ƒ #ease(now, leg, e) | FALSE | |||||||||||||||||||||||
| time: 880 | time: 750 | l | sum | from /info, browser back button takes you to blank homepage, must F5 | 0.932 | 1007 | 14 | 3 | 422.15 | 205 | 11710.2999999523 | 49.6999999285 | #start: 0 | TRUE | #start: 0 | |||||||||||||||||
| type: 1 | type: 1 | 53 | 269 | resizing window should always pause idler | 14 | 3 | 421.74 | 205 | 11760.3999999761 | 50.1000000238 | #targets: Set(2) | TRUE | #targets: Set(2) | |||||||||||||||||||
| unit: 1 | unit: 1 | b | 1.055 | song.inner and outer combined in one Elms instance | 30 | 3 | 421.03 | 205 | 11823.2999999523 | 62.8999999762 | #time: 2000 | TRUE | #time: 2000 | |||||||||||||||||||
| wait: 120 | wait: 130 | 11 | xlink:href deprecated, and do I still need xlmns=xlink? Yes! | 19.884 | 41 | 3 | 420.53 | 205 | 11860.8999999761 | 37.6000000238 | #value: undefined | TRUE | #value: undefined | |||||||||||||||||||
| mouseTouch functions should take an array of elms or Elms as an option | 48 | 55 | 3 | 419.92 | 205 | 11910.7000000476 | 49.8000000715 | #wait: 0 | TRUE | #wait: 0 | ||||||||||||||||||||||
| raf/test/color | slow down the song list open /close cues animation & audio | 2.414 | 67 | 3 | 419.41 | 205 | 11961.7000000476 | 51 | #ze | FALSE | #zero: 2000 | |||||||||||||||||||||
| frame object: | iAgree: audio duration matching lower fidelity gpu animation time? | 19.8822509939086 | distance | 80 | 3 | 418.80 | 205 | 12030 | 68.2999999524 | |||||||||||||||||||||||
| t: | of course | g.easies = new Easies(ezX); | stackoverflow: post question when to run array.some prior to .forEach? | 1.4142135624 | 12060.6000000238 | 30.6000000238 | ||||||||||||||||||||||||||
| x: | same as both others | updateEzXY() | transition animations: | 14.0588745030457 | x/y offset | 12111 | 50.3999999762 | |||||||||||||||||||||||||
| args: | oneD x 3, twoD x 3 x 2 | newTargets() | static green vs b&w, always serial as overlap is messy | 28.1177490061 | 12160.5 | 49.5 | ||||||||||||||||||||||||||
| localStorage restore: | updateTime() | x | y/multi | slide in left to right/right to left with ease slow to fast, simultaneous or serial | 48.0000000000001 | 12210.6000000238 | 50.1000000238 | |||||||||||||||||||||||||
| color-name | button.symButt textContent | newMulti() | first-time user | scrape screen | 48.0042224742266 | 12260.7999999523 | 50.1999999285 | |||||||||||||||||||||||||
| MEaser-: or | elms.named.value | save named | sideways.js | 94 | 3 | 418.19 | 205 | 12323.7999999523 | 63 | |||||||||||||||||||||||
| Easy-: | returning user | localStorage | ez.addXX() change addend: to start: | 33.9411254969543 | 106 | 3 | 417.69 | 205 | ||||||||||||||||||||||||
| time: | msecs = elms.time.value | case 1: set zero w/performance.now() pre rAF() | open named | ez.addXX() change factor: to end: or distance: | 120 | 3 | 417.08 | 205 | ||||||||||||||||||||||||
| roundTrip: | button.symButt textContent | slightly less late or maybe a tiny bit early | variable naming: Elm vs Element vs Object, sometimes identical properties across types | |||||||||||||||||||||||||||||
| start-color: | <input type="text"> value | abbreviated names for _htmlR functions, maybe _html too | ||||||||||||||||||||||||||||||
| end-color: | ditto | case 2: set zero inside first frame's callback | clickYesNo glob.svgW factor:2, clarify by testing factor:0, addend:0 | 131 | 3 | 416.57 | 205 | |||||||||||||||||||||||||
| start-space: | <select> value | audio up to a frame late | loadIt() expired variable – kill it but pick the right speed. | |||||||||||||||||||||||||||||
| end-space: | ditto | unless you use frame rounding to split that | welcome animation typist.chars[3] = typist.up[0], review that | |||||||||||||||||||||||||||||
| collapse: | button.symButt textContent | raf.js | 143 | 3 | 416.07 | 205 | ||||||||||||||||||||||||||
| fullBody | button.symButt textContent | plays > 1 && roundTrip forces autoTrip = true | 100 | 157 | 3 | 415.46 | 205 | |||||||||||||||||||||||||
| linkSpaces: | button.symButt textContent | 0.000 | 3 | MEBase.autoTrip effectively toggles roundTrip, but ez.rT must be ON | ||||||||||||||||||||||||||||
| __0.0 | 1 | test pause/resume with turns, especially return trip | ||||||||||||||||||||||||||||||
| 0 | 1 | __0.0 | maybe Ez.zinit() should be run by user... | |||||||||||||||||||||||||||||
| 0 | 100 | __0.0 | ASyncCues w/setTimeout() is possibly a better implementation | |||||||||||||||||||||||||||||
| 0 | 105 | __0.0 | roundTrip option: flipTrip to flip io by leg or not (currently always on) | 255 | 168 | 3 | 414.95 | 205 | ||||||||||||||||||||||||
| 0 | 145 | __0.0 | bezier does not flipTrip now - how to flip bezier? | 0.3921568627 | 182 | 3 | 414.34 | 205 | ||||||||||||||||||||||||
| 0 | 150 | __0.0 | 0 | easy.addXX(): mask arg should be before func arg, zero is a mask... | 196 | 3 | 413.73 | 205 | ||||||||||||||||||||||||
| 0 | 220 | ____0 | .basic=true w/func, mask and units (especially mask) | 208 | 3 | 413.23 | 205 | |||||||||||||||||||||||||
| 0 | 360 | ____0 | what was the deal with the “combo” variable in ease() and easeMe()? | 221 | 3 | 412.62 | 205 | |||||||||||||||||||||||||
| 0 | 9504.7 | ____0 | 829.8 | was I trying to collect unique values (a Set) from teaser? | ||||||||||||||||||||||||||||
| 0 | 10000 | ____0 | 812.362 | Prop.get() do I need a way to force get empty string, not computed value? | ||||||||||||||||||||||||||||
| 0 | 10888.3 | -0.00 | 2 | 17.438 | similar to #izSVG returning false to force getting style value (or vice-versa) | 4 | ||||||||||||||||||||||||||
| 0 | 65504 | -.000 | 3x | Prop.svg to avoid adding units for skewX/Y, translate, what else? | 10 | |||||||||||||||||||||||||||
| -0.36 | 1.47 | -.000 | if 2D arrays are byArgByElm you must set .bAbE or .byArgByElm! | 0.4 | ||||||||||||||||||||||||||||
| -0.4 | 0.4 | -000 | 0 | new Func, maybe add arg for separator now that funcs all categorized | ||||||||||||||||||||||||||||
| -0.5 | 0.5 | -000 | do I need code to return numbers from #funcN functions? Transforms? | |||||||||||||||||||||||||||||
| -125 | 125 | should I expose filter funcs like transform funcs in Elm? | 238 | 3 | 411.91 | 205 | ||||||||||||||||||||||||||
| -215 | 215 | future option to roundtrip w/o swapping inOut | 249 | 3 | 411.40 | 205 | ||||||||||||||||||||||||||
| I am now including leg.wait in this.#time, side-effects??? | 263 | 3 | 410.79 | 205 | ||||||||||||||||||||||||||||
| Should all of cfg.param be validated as/converted to numbers? | 277 | 3 | 410.18 | 205 | ||||||||||||||||||||||||||||
| Does it take a long time? It's not much code… | 289 | 3 | 409.68 | 205 | ||||||||||||||||||||||||||||
| now | 1000 | play | Class Elm and CSSStyleDeclaration!!!!! | 305 | 3 | 408.97 | 205 | |||||||||||||||||||||||||
| #zero | 1000 | multiFunc: preserving current value func order is impossible | 319 | 3 | 408.36 | 205 | ||||||||||||||||||||||||||
| #now | 0 | because args must be in fixed order at top level | 330 | 3 | 407.85 | 205 | ||||||||||||||||||||||||||
| now | 3250 | pause | if elm has alt func order it must be in separate easer | 344 | 3 | 407.24 | 205 | |||||||||||||||||||||||||
| currTime: | 0.000 | #now | 2250 | docs: CSS – use rotateZ() instead of rotate(), so latter can be svg-only | 356 | 3 | 406.74 | 205 | ||||||||||||||||||||||||
| perfNow: | 28545.400 | cue[#i].wait | 2500 | PR.r3 and PR.hsl.units | 374 | 3 | 405.93 | 205 | ||||||||||||||||||||||||
| sleeping... | remainder | 250 | CSS path() function: fill-rule arg not supported, set it as a CSS property instead | 388 | 3 | 405.32 | 205 | |||||||||||||||||||||||||
| currTime: | 1.011 | now | 5000 | resume | loop and roundtrip never touch start/end unless you set pause(RT) | 406 | 3 | 404.51 | 205 | |||||||||||||||||||||||
| perfNow: | 29557.900 | #zero | 2750 | {pause:1} it will land but jump in next frame, best to set = ~16 (1 frame @60hz) | 418 | 3 | 404.00 | 205 | ||||||||||||||||||||||||
| timeStamp: | 29546.145 | #now | 2250 | no-change | can't up-dimension from 1D byElm | |||||||||||||||||||||||||||
| currTime: | 1.011 | time spent pausing | 2750 | so can't have a 1D byElm famm and a 2D famm in same Easer | 404 | 0 | -18.25 | 0 | ||||||||||||||||||||||||
| perfNow: | 29558.400 | Easy.#unit and #end: having both makes it easier for >1 targets | ||||||||||||||||||||||||||||||
| 60 | If it's a performance drag to computing both, remove #end and | |||||||||||||||||||||||||||||||
| 16.6666666667 | force factors/addends on all targets. | |||||||||||||||||||||||||||||||
| margin and padding 1-4 args: let() only handle 1 and 4, not 2 args | ||||||||||||||||||||||||||||||||
| easy.pre runs at time=zero, regardless of wait value, enhancement… | ||||||||||||||||||||||||||||||||
| 999 | problem is knowing when it's this.#wait that has expired | |||||||||||||||||||||||||||||||
| 16.67 | if (!Is.def(o.mask) && f/a == number) no mask, spread f/a | |||||||||||||||||||||||||||||||
| 16653.33 | if you want the f/a number to act as mask of zero, use [N] | |||||||||||||||||||||||||||||||
| 1028 | let(): funcs with argN list or flex args, plugging only happens if user | |||||||||||||||||||||||||||||||
| 24 | Value is full-length array with undefined elements for where to plug | |||||||||||||||||||||||||||||||
| 0.0233463035 | You could create a custom bitmask if you really want to | |||||||||||||||||||||||||||||||
| current value is considered complete, the full set of args | ||||||||||||||||||||||||||||||||
| -15 | animation handles CSS gradients with Geaser. calc, linear, steps | |||||||||||||||||||||||||||||||
| 1030 | are unlikely to be animated. | |||||||||||||||||||||||||||||||
| -1.456% | though maybe this should be done via vet() or net(), not let()... | |||||||||||||||||||||||||||||||
| -0.495% | for Geaser: dx, dy, x, y, rotate are optionally unstructured w/<text>,<tspan> | |||||||||||||||||||||||||||||||
| 99.505% | you must set the .set property in the obj arg to E.net to Geaser them | |||||||||||||||||||||||||||||||
| 98.544% | if no mask: | |||||||||||||||||||||||||||||||
| if 2D array, 1st elm's array used as mask | ||||||||||||||||||||||||||||||||
| if both factor & addend are arrays, longest or factor = mask | ||||||||||||||||||||||||||||||||
| basically: in these cases I recommend using a mask | ||||||||||||||||||||||||||||||||
| if no factor or addend but spread ease value, mask required | ||||||||||||||||||||||||||||||||
| max and min arrays are never used as as the mask | ||||||||||||||||||||||||||||||||
| If config.dmax == 2, all 1D arrays are by arg, not by elm | ||||||||||||||||||||||||||||||||
| I can't imagine a case where you would need 1D by elm | ||||||||||||||||||||||||||||||||
| easy.addXX(): factor, addend, plug arrays, must be same size | ||||||||||||||||||||||||||||||||
| const easy = new Easy({time:2000, start:0, end:1000}); | time (ms) | value0 | unit0 | comp0 | value1 | unit1 | comp1 | value2 | unit2 | comp2 | 2 colors side-by-side | color | fill | stroke | accent | bgColor | border-alpha | value | #controls | 1 | |||||||||||||||||||
| const easy2 = new Easy({time:2000, start:0, end:1000}); | 0 | 18 | 0 | 1 | 18 | 0 | 1 | 18 | 0 | 1 | toggle E & M> | Easing or Multi | duration | borders | select, input | border-gray | button, … | state | state | x | controls | controls | x | span | 20 | ||||||||||||||
| const easy3 = new Easy({time:2000, start:0, end:1000}); | 17 | 21 | 0.008 | 0.992 | 21 | 0.008 | 0.992 | 21 | 0.008 | 0.992 | start color | start canvas | controls, s/e canvas | black | .black, … | state:disabled | state:disabled | time | endCanvas | startCanvas | time | select | 4 | ||||||||||||||||
| const easies = new Easies([easy,easy2,easy3]); | 33 | 23 | 0.017 | 0.983 | 23 | 0.017 | 0.983 | 23 | 0.017 | 0.983 | end color | end canvas | color | select, input | pitch | .symSpan, … | endCanvas | text | 2 | ||||||||||||||||||||
| const measer = easies.newTarget({elm:myElm, prop:Prop.clipPath, mask:[6, 8, 14, 16, 22, 24], start:18, end:346, easies:[easy, easy, easy2, easy2, easy3, easy3]}); | 50 | 26 | 0.025 | 0.975 | 26 | 0.025 | 0.975 | 26 | 0.025 | 0.975 | left space | right space | span | input texts | range | 2 | |||||||||||||||||||||||
| const raf = new AFrame(easies); | 67 | 29 | 0.033 | 0.967 | 29 | 0.033 | 0.967 | 29 | 0.033 | 0.967 | left start | right start | button, state | stop: disabled gray | selects | label | 3 | ||||||||||||||||||||||
| 83 | 32 | 0.042 | 0.958 | 32 | 0.042 | 0.958 | 32 | 0.042 | 0.958 | left end | right end | bg-color | controls | rightStart | button | 4 | |||||||||||||||||||||||
| 100 | 34 | 0.050 | 0.950 | 34 | 0.050 | 0.950 | 34 | 0.050 | 0.950 | left value | right value | rightValue | state | 2 | |||||||||||||||||||||||||
| 117 | 37 | 0.058 | 0.942 | 37 | 0.058 | 0.942 | 37 | 0.058 | 0.942 | left display value | right display value | rightEnd | div | 2 | |||||||||||||||||||||||||
| 133 | 40 | 0.067 | 0.933 | 40 | 0.067 | 0.933 | 40 | 0.067 | 0.933 | left canvas | right canvas | 40 | |||||||||||||||||||||||||||
| 150 | 43 | 0.075 | 0.925 | 43 | 0.075 | 0.925 | 43 | 0.075 | 0.925 | input#x | <"fullscreen" button | ||||||||||||||||||||||||||||
| common | easings.html controls | 167 | 45 | 0.083 | 0.917 | 45 | 0.083 | 0.917 | 45 | 0.083 | 0.917 | playback | |||||||||||||||||||||||||||
| 1030 | # | easy | time | both | 183 | 48 | 0.092 | 0.908 | 48 | 0.092 | 0.908 | 48 | 0.092 | 0.908 | |||||||||||||||||||||||||
| 635 | 635 | common.js | # | easy | plays | both | 200 | 51 | 0.100 | 0.900 | 51 | 0.100 | 0.900 | 51 | 0.100 | 0.900 | |||||||||||||||||||||||
| 0.6165048544 | 0.6165048544 | 8.0145631068 | * | easteps.js | # | easy | loopWait | both | 217 | 54 | 0.108 | 0.892 | 54 | 0.108 | 0.892 | 54 | 0.108 | 0.892 | |||||||||||||||||||||
| 2.4660194175 | draw.js | # | easy | roundTrip | both | 233 | 56 | 0.117 | 0.883 | 56 | 0.117 | 0.883 | 56 | 0.117 | 0.883 | ||||||||||||||||||||||||
| 15 | play.js | # | easy | autoTrip | both | 250 | 59 | 0.125 | 0.875 | 59 | 0.125 | 0.875 | 59 | 0.125 | 0.875 | ||||||||||||||||||||||||
| 9.2475728155 | update.js | # | easy | flipTrip | y | x = linear = noop | 267 | 62 | 0.133 | 0.867 | 62 | 0.133 | 0.867 | 62 | 0.133 | 0.867 | |||||||||||||||||||||||
| 4 | named.js | # | easy | tripWait | both | 283 | 64 | 0.142 | 0.858 | 64 | 0.142 | 0.858 | 64 | 0.142 | 0.858 | ||||||||||||||||||||||||
| 5.2475728155 | copy.js | # | easy | start | y | x fixed at 0 | 300 | 67 | 0.150 | 0.850 | 67 | 0.150 | 0.850 | 67 | 0.150 | 0.850 | |||||||||||||||||||||||
| easings.js | # | easy | end | y | x fixed at MILLI | 317 | 70 | 0.158 | 0.842 | 70 | 0.158 | 0.842 | 70 | 0.158 | 0.842 | ||||||||||||||||||||||||
| steps.js | #* | easy… | direction | y | 333 | 73 | 0.167 | 0.833 | 73 | 0.167 | 0.833 | 73 | 0.167 | 0.833 | |||||||||||||||||||||||||
| multi.js | easy | type | y | 350 | 75 | 0.175 | 0.825 | 75 | 0.175 | 0.825 | 75 | 0.175 | 0.825 | ||||||||||||||||||||||||||
| easy.leg | type2 | y | 367 | 78 | 0.183 | 0.817 | 78 | 0.183 | 0.817 | 78 | 0.183 | 0.817 | |||||||||||||||||||||||||||
| <check-tri> | previous value | easy | io | y | 383 | 81 | 0.192 | 0.808 | 81 | 0.192 | 0.808 | 81 | 0.192 | 0.808 | |||||||||||||||||||||||||
| FALSE | TRUE | FALSE | TRUE | default value | easy | pow | y | 400 | 84 | 0.200 | 0.800 | 84 | 0.200 | 0.800 | 84 | 0.200 | 0.800 | ||||||||||||||||||||||
| null | null | FALSE | TRUE | 3-way rotation order | easy.leg | pow2 | y | 417 | 86 | 0.208 | 0.792 | 86 | 0.208 | 0.792 | 86 | 0.208 | 0.792 | ||||||||||||||||||||||
| TRUE | FALSE | null | null | easy | bezier0 | y | 433 | 89 | 0.217 | 0.783 | 89 | 0.217 | 0.783 | 89 | 0.217 | 0.783 | |||||||||||||||||||||||
| FALSE | TRUE | TRUE | FALSE | easy | bezier1 | y | 450 | 92 | 0.225 | 0.775 | 92 | 0.225 | 0.775 | 92 | 0.225 | 0.775 | |||||||||||||||||||||||
| easy | bezier2 | y | 467 | 95 | 0.233 | 0.767 | 95 | 0.233 | 0.767 | 95 | 0.233 | 0.767 | |||||||||||||||||||||||||||
| easy | bezier3 | y | 483 | 97 | 0.242 | 0.758 | 97 | 0.242 | 0.758 | 97 | 0.242 | 0.758 | |||||||||||||||||||||||||||
| * | easer | {loopByElm} | y | 500 | 100 | 0.250 | 0.750 | 100 | 0.250 | 0.750 | 100 | 0.250 | 0.750 | ||||||||||||||||||||||||||
| local | (linkType) | y | 517 | 103 | 0.258 | 0.742 | 103 | 0.258 | 0.742 | 103 | 0.258 | 0.742 | |||||||||||||||||||||||||||
| local | (linkPow) | y | 533 | 105 | 0.267 | 0.733 | 105 | 0.267 | 0.733 | 105 | 0.267 | 0.733 | |||||||||||||||||||||||||||
| local | (drawSteps) | y | 550 | 108 | 0.275 | 0.725 | 108 | 0.275 | 0.725 | 108 | 0.275 | 0.725 | |||||||||||||||||||||||||||
| raf | [reset] | y | 567 | 111 | 0.283 | 0.717 | 111 | 0.283 | 0.717 | 111 | 0.283 | 0.717 | |||||||||||||||||||||||||||
| 583 | 114 | 0.292 | 0.708 | 114 | 0.292 | 0.708 | 114 | 0.292 | 0.708 | ||||||||||||||||||||||||||||||
| <input type="number"/> | input event | change event | 2 | 3 | 3 | 4 | 600 | 116 | 0.300 | 0.700 | 116 | 0.300 | 0.700 | 116 | 0.300 | 0.700 | |||||||||||||||||||||||
| userValues | 3 | changeSteps() | E.none | E.start | E.end | E.both | 617 | 119 | 0.308 | 0.692 | 119 | 0.308 | 0.692 | 119 | 0.308 | 0.692 | |||||||||||||||||||||||
| userTiming | 3 | ditto | 3 | 0ms | 0ms | 633 | 122 | 0.317 | 0.683 | 122 | 0.317 | 0.683 | 122 | 0.317 | 0.683 | ||||||||||||||||||||||||
| bezier | 4 | input.bezier() | 0.3335 | 2000 | 667ms | 667ms | 667ms | 667ms | 650 | 125 | 0.325 | 0.675 | 125 | 0.325 | 0.675 | 125 | 0.325 | 0.675 | |||||||||||||||||||||
| pow | 2 | inputTypeIO() | 2000 | 1333ms | 1333ms | 1333ms | 1333ms | 667 | 127 | 0.333 | 0.667 | 127 | 0.333 | 0.667 | 127 | 0.333 | 0.667 | ||||||||||||||||||||||
| mid | 1 | input.mid() | changeMSG() | 2000ms | 2000ms | 683 | 130 | 0.342 | 0.658 | 130 | 0.342 | 0.658 | 130 | 0.342 | 0.658 | ||||||||||||||||||||||||
| split | 1 | input.split() | ditto | 0 | 333 | 250 | 700 | 133 | 0.350 | 0.650 | 133 | 0.350 | 0.650 | 133 | 0.350 | 0.650 | |||||||||||||||||||||||
| gap | 1 | ditto | 1000 | 500 | 667 | 333 | 500 | 717 | 136 | 0.358 | 0.642 | 136 | 0.358 | 0.642 | 136 | 0.358 | 0.642 | ||||||||||||||||||||||
| 15 | 1000 | 1000 | 667 | 750 | 733 | 138 | 0.367 | 0.633 | 138 | 0.367 | 0.633 | 138 | 0.367 | 0.633 | |||||||||||||||||||||||||
| 1000 | 1000 | 750 | 141 | 0.375 | 0.625 | 141 | 0.375 | 0.625 | 141 | 0.375 | 0.625 | ||||||||||||||||||||||||||||
| 767 | 144 | 0.383 | 0.617 | 144 | 0.383 | 0.617 | 144 | 0.383 | 0.617 | ||||||||||||||||||||||||||||||
| 783 | 146 | 0.392 | 0.608 | 146 | 0.392 | 0.608 | 146 | 0.392 | 0.608 | ||||||||||||||||||||||||||||||
| 800 | 149 | 0.400 | 0.600 | 149 | 0.400 | 0.600 | 149 | 0.400 | 0.600 | ||||||||||||||||||||||||||||||
| 817 | 152 | 0.408 | 0.592 | 152 | 0.408 | 0.592 | 152 | 0.408 | 0.592 | ||||||||||||||||||||||||||||||
| 833 | 155 | 0.417 | 0.583 | 155 | 0.417 | 0.583 | 155 | 0.417 | 0.583 | ||||||||||||||||||||||||||||||
| 850 | 157 | 0.425 | 0.575 | 157 | 0.425 | 0.575 | 157 | 0.425 | 0.575 | ||||||||||||||||||||||||||||||
| 867 | 160 | 0.433 | 0.567 | 160 | 0.433 | 0.567 | 160 | 0.433 | 0.567 | ||||||||||||||||||||||||||||||
| 883 | 163 | 0.442 | 0.558 | 163 | 0.442 | 0.558 | 163 | 0.442 | 0.558 | ||||||||||||||||||||||||||||||
| 900 | 166 | 0.450 | 0.550 | 166 | 0.450 | 0.550 | 166 | 0.450 | 0.550 | ||||||||||||||||||||||||||||||
| 917 | 168 | 0.458 | 0.542 | 168 | 0.458 | 0.542 | 168 | 0.458 | 0.542 | ||||||||||||||||||||||||||||||
| 933 | 171 | 0.467 | 0.533 | 171 | 0.467 | 0.533 | 171 | 0.467 | 0.533 | ||||||||||||||||||||||||||||||
| 950 | 174 | 0.475 | 0.525 | 174 | 0.475 | 0.525 | 174 | 0.475 | 0.525 | ||||||||||||||||||||||||||||||
| 967 | 177 | 0.483 | 0.517 | 177 | 0.483 | 0.517 | 177 | 0.483 | 0.517 | ||||||||||||||||||||||||||||||
| 983 | 179 | 0.492 | 0.508 | 179 | 0.492 | 0.508 | 179 | 0.492 | 0.508 | ||||||||||||||||||||||||||||||
| 1000 | 182 | 0.500 | 0.500 | 182 | 0.500 | 0.500 | 182 | 0.500 | 0.500 | ||||||||||||||||||||||||||||||
| 1017 | 185 | 0.508 | 0.492 | 185 | 0.508 | 0.492 | 185 | 0.508 | 0.492 | ||||||||||||||||||||||||||||||
| 1033 | 187 | 0.517 | 0.483 | 187 | 0.517 | 0.483 | 187 | 0.517 | 0.483 | ||||||||||||||||||||||||||||||
| 1050 | 190 | 0.525 | 0.475 | 190 | 0.525 | 0.475 | 190 | 0.525 | 0.475 | ||||||||||||||||||||||||||||||
| 1067 | 193 | 0.533 | 0.467 | 193 | 0.533 | 0.467 | 193 | 0.533 | 0.467 | ||||||||||||||||||||||||||||||
| 1083 | 196 | 0.542 | 0.458 | 196 | 0.542 | 0.458 | 196 | 0.542 | 0.458 | ||||||||||||||||||||||||||||||
| 1100 | 198 | 0.550 | 0.450 | 198 | 0.550 | 0.450 | 198 | 0.550 | 0.450 | ||||||||||||||||||||||||||||||
| 1117 | 201 | 0.558 | 0.442 | 201 | 0.558 | 0.442 | 201 | 0.558 | 0.442 | ||||||||||||||||||||||||||||||
| 1133 | 204 | 0.567 | 0.433 | 204 | 0.567 | 0.433 | 204 | 0.567 | 0.433 | ||||||||||||||||||||||||||||||
| 1150 | 207 | 0.575 | 0.425 | 207 | 0.575 | 0.425 | 207 | 0.575 | 0.425 | ||||||||||||||||||||||||||||||
| 1167 | 209 | 0.583 | 0.417 | 209 | 0.583 | 0.417 | 209 | 0.583 | 0.417 | ||||||||||||||||||||||||||||||
| 1183 | 212 | 0.592 | 0.408 | 212 | 0.592 | 0.408 | 212 | 0.592 | 0.408 | ||||||||||||||||||||||||||||||
| 1200 | 215 | 0.600 | 0.400 | 215 | 0.600 | 0.400 | 215 | 0.600 | 0.400 | ||||||||||||||||||||||||||||||
| 1217 | 218 | 0.608 | 0.392 | 218 | 0.608 | 0.392 | 218 | 0.608 | 0.392 | ||||||||||||||||||||||||||||||
| 1233 | 220 | 0.617 | 0.383 | 220 | 0.617 | 0.383 | 220 | 0.617 | 0.383 | ||||||||||||||||||||||||||||||
| 1250 | 223 | 0.625 | 0.375 | 223 | 0.625 | 0.375 | 223 | 0.625 | 0.375 | ||||||||||||||||||||||||||||||
| 1267 | 226 | 0.633 | 0.367 | 226 | 0.633 | 0.367 | 226 | 0.633 | 0.367 | ||||||||||||||||||||||||||||||
| 1283 | 228 | 0.642 | 0.358 | 228 | 0.642 | 0.358 | 228 | 0.642 | 0.358 | ||||||||||||||||||||||||||||||
| 1300 | 231 | 0.650 | 0.350 | 231 | 0.650 | 0.350 | 231 | 0.650 | 0.350 | ||||||||||||||||||||||||||||||
| 1317 | 234 | 0.658 | 0.342 | 234 | 0.658 | 0.342 | 234 | 0.658 | 0.342 | ||||||||||||||||||||||||||||||
| 1333 | 237 | 0.667 | 0.333 | 237 | 0.667 | 0.333 | 237 | 0.667 | 0.333 | ||||||||||||||||||||||||||||||
| 1350 | 239 | 0.675 | 0.325 | 239 | 0.675 | 0.325 | 239 | 0.675 | 0.325 | ||||||||||||||||||||||||||||||
| 1367 | 242 | 0.683 | 0.317 | 242 | 0.683 | 0.317 | 242 | 0.683 | 0.317 | ||||||||||||||||||||||||||||||
| 1383 | 245 | 0.692 | 0.308 | 245 | 0.692 | 0.308 | 245 | 0.692 | 0.308 | ||||||||||||||||||||||||||||||
| 1400 | 248 | 0.700 | 0.300 | 248 | 0.700 | 0.300 | 248 | 0.700 | 0.300 | ||||||||||||||||||||||||||||||
| 1417 | 250 | 0.708 | 0.292 | 250 | 0.708 | 0.292 | 250 | 0.708 | 0.292 | ||||||||||||||||||||||||||||||
| 1433 | 253 | 0.717 | 0.283 | 253 | 0.717 | 0.283 | 253 | 0.717 | 0.283 | ||||||||||||||||||||||||||||||
| 1450 | 256 | 0.725 | 0.275 | 256 | 0.725 | 0.275 | 256 | 0.725 | 0.275 | ||||||||||||||||||||||||||||||
| 1467 | 259 | 0.733 | 0.267 | 259 | 0.733 | 0.267 | 259 | 0.733 | 0.267 | ||||||||||||||||||||||||||||||
| 1483 | 261 | 0.742 | 0.258 | 261 | 0.742 | 0.258 | 261 | 0.742 | 0.258 | ||||||||||||||||||||||||||||||
| 1500 | 264 | 0.750 | 0.250 | 264 | 0.750 | 0.250 | 264 | 0.750 | 0.250 | ||||||||||||||||||||||||||||||
| 1517 | 267 | 0.758 | 0.242 | 267 | 0.758 | 0.242 | 267 | 0.758 | 0.242 | ||||||||||||||||||||||||||||||
| 1533 | 269 | 0.767 | 0.233 | 269 | 0.767 | 0.233 | 269 | 0.767 | 0.233 | ||||||||||||||||||||||||||||||
| 1550 | 272 | 0.775 | 0.225 | 272 | 0.775 | 0.225 | 272 | 0.775 | 0.225 | ||||||||||||||||||||||||||||||
| 1567 | 275 | 0.783 | 0.217 | 275 | 0.783 | 0.217 | 275 | 0.783 | 0.217 | ||||||||||||||||||||||||||||||
| 1583 | 278 | 0.792 | 0.208 | 278 | 0.792 | 0.208 | 278 | 0.792 | 0.208 | ||||||||||||||||||||||||||||||
| 1600 | 280 | 0.800 | 0.200 | 280 | 0.800 | 0.200 | 280 | 0.800 | 0.200 | ||||||||||||||||||||||||||||||
| 1617 | 283 | 0.808 | 0.192 | 283 | 0.808 | 0.192 | 283 | 0.808 | 0.192 | ||||||||||||||||||||||||||||||
| 1633 | 286 | 0.817 | 0.183 | 286 | 0.817 | 0.183 | 286 | 0.817 | 0.183 | ||||||||||||||||||||||||||||||
| 1650 | 289 | 0.825 | 0.175 | 289 | 0.825 | 0.175 | 289 | 0.825 | 0.175 | ||||||||||||||||||||||||||||||
| 1667 | 291 | 0.833 | 0.167 | 291 | 0.833 | 0.167 | 291 | 0.833 | 0.167 | ||||||||||||||||||||||||||||||
| 1683 | 294 | 0.842 | 0.158 | 294 | 0.842 | 0.158 | 294 | 0.842 | 0.158 | ||||||||||||||||||||||||||||||
| 1700 | 297 | 0.850 | 0.150 | 297 | 0.850 | 0.150 | 297 | 0.850 | 0.150 | ||||||||||||||||||||||||||||||
| 1717 | 300 | 0.858 | 0.142 | 300 | 0.858 | 0.142 | 300 | 0.858 | 0.142 | end | 1000 | end | 1000 | ||||||||||||||||||||||||||
| 1733 | 302 | 0.867 | 0.133 | 302 | 0.867 | 0.133 | 302 | 0.867 | 0.133 | legs | [ | legs | [ | ||||||||||||||||||||||||||
| 1750 | 305 | 0.875 | 0.125 | 305 | 0.875 | 0.125 | 305 | 0.875 | 0.125 | { | { | ||||||||||||||||||||||||||||
| 1767 | 308 | 0.883 | 0.117 | 308 | 0.883 | 0.117 | 308 | 0.883 | 0.117 | time | 1500 | time | 1500 | ||||||||||||||||||||||||||
| 1783 | 310 | 0.892 | 0.108 | 310 | 0.892 | 0.108 | 310 | 0.892 | 0.108 | type | 7 | end | 585 | ||||||||||||||||||||||||||
| 1800 | 313 | 0.900 | 0.100 | 313 | 0.900 | 0.100 | 313 | 0.900 | 0.100 | io | 1 | type | 7 | ||||||||||||||||||||||||||
| 1817 | 316 | 0.908 | 0.092 | 316 | 0.908 | 0.092 | 316 | 0.908 | 0.092 | pow | 2.5 | io | 1 | ||||||||||||||||||||||||||
| 1833 | 319 | 0.917 | 0.083 | 319 | 0.917 | 0.083 | 319 | 0.917 | 0.083 | end | 585 | pow | 2.5 | ||||||||||||||||||||||||||
| 1850 | 321 | 0.925 | 0.075 | 321 | 0.925 | 0.075 | 321 | 0.925 | 0.075 | }, | } | ||||||||||||||||||||||||||||
| 1867 | 324 | 0.933 | 0.067 | 324 | 0.933 | 0.067 | 324 | 0.933 | 0.067 | { | { | ||||||||||||||||||||||||||||
| 1883 | 327 | 0.942 | 0.058 | 327 | 0.942 | 0.058 | 327 | 0.942 | 0.058 | time | 500 | time | 500 | ||||||||||||||||||||||||||
| 1900 | 330 | 0.950 | 0.050 | 330 | 0.950 | 0.050 | 330 | 0.950 | 0.050 | type | 7 | type | 7 | ||||||||||||||||||||||||||
| 1917 | 332 | 0.958 | 0.042 | 332 | 0.958 | 0.042 | 332 | 0.958 | 0.042 | pow | 5 | pow | 5 | ||||||||||||||||||||||||||
| 1933 | 335 | 0.967 | 0.033 | 335 | 0.967 | 0.033 | 335 | 0.967 | 0.033 | } | } | ||||||||||||||||||||||||||||
| 1950 | 338 | 0.975 | 0.025 | 338 | 0.975 | 0.025 | 338 | 0.975 | 0.025 | ] | ] | ||||||||||||||||||||||||||||
| 1967 | 341 | 0.983 | 0.017 | 341 | 0.983 | 0.017 | 341 | 0.983 | 0.017 | ||||||||||||||||||||||||||||||
| 1983 | 343 | 0.992 | 0.008 | 343 | 0.992 | 0.008 | 343 | 0.992 | 0.008 | ||||||||||||||||||||||||||||||
| 2000 | 346 | 1 | 0 | 346 | 1 | 0 | 346 | 1 | 0 | ||||||||||||||||||||||||||||||
| start | end | eKey | |||||||||||||||||||||||||||||||||||||
| r: | 0 | 1 | unit | ||||||||||||||||||||||||||||||||||||
| g: | 0 | 1 | unit | 1000,"steps" | 30,"timing" | ||||||||||||||||||||||||||||||||||
| b: | 0 | 1 | unit | {"time" | 3125,"type" | 9,"end" | pow_2.5o/5i,"jump" | 3} | |||||||||||||||||||||||||||||||
| a: | 1 | 0 | comp | 1000,\"steps\" | 30,\"jump\" | ||||||||||||||||||||||||||||||||||
| {\time\" | 3125,\"type\" | 9,\"end\" | 3,\"timing\" | \"pow_2.5o/5i\"}" | |||||||||||||||||||||||||||||||||||
| 57.609 | 55.008 | 117.609 | |||||||||||||||||||||||||||||||||||||
| 48.016 | 45.406 | 108.016 | 9px | 8ch | |||||||||||||||||||||||||||||||||||
| 9.593 | 9.602 | 9.593 | 6px | 6ch | -2ch | ||||||||||||||||||||||||||||||||||
| 3px | 6ch | ||||||||||||||||||||||||||||||||||||||
| 64 | |||||||||||||||||||||||||||||||||||||||
| 54.406 | left | ||||||||||||||||||||||||||||||||||||||
| 9.594 | 639.765625 | autoTrip | |||||||||||||||||||||||||||||||||||||
| 679.453125 | loopByElm | ||||||||||||||||||||||||||||||||||||||
| 39.6875 | diff | ||||||||||||||||||||||||||||||||||||||